Как настроить размер шрифта в Ionic Framework

Ответ 1

Я думаю, тебе не нужно все это забывать, Сасс. В каталоге проекта в

.../yourProject/www/lib/ionic/scss

Существует файл с именем _variables.scss, где вы увидите что-то вроде этого: Это переменные размера шрифта, вам просто нужно их изменить, а затем создать ионный файл css. Я предлагаю вам использовать https://prepros.io/. Надеюсь, это помогло вам.

Ответ 2

Поняв, что я поделился тем, что узнал в Ionic.

В принципе, Ionic имеет набор размеров, цветов, шрифтов по умолчанию для каждой отдельной вещи, которую вы можете создать, и этот набор сохраняется в файле _variables.scss. Этот файл находится в lib/ionic/scss/_variables.scss

Откройте этот файл и выполните поиск того, что вы хотите изменить. Например, мне нужно было увеличить размер шрифта заголовка. Поэтому я искал файл _variables.scss и нашел $bar-title-font-size.

Он был определен как $bar-title-font-size: 17px !default;

Теперь откройте файл ionic.app.scss и напишите что-нибудь вроде

$bar-title-font-size: 25px !default;

*** Не забудьте написать вышеприведенный оператор перед оператором @import "ionic/scss/ionic";.

Сохраните файл, и ваши изменения мгновенно вступят в силу. Ионный сделал это так просто!!!:)

Ответ 3

Найдите свой проект /www/css и отредактируйте style.css, а внутри файла напишите:

{font-size:55px !important;}

измените 55px на любой размер, который вам нужен.

Ответ 4

Часто вы хотите решить, когда использовать размер значка, поэтому я придумал следующее решение.

CSS

/* Ionicon icons resizing css */
.ion-1x { font-size: 24px !important;}
.ion-2x { font-size: 48px !important;}

HTML

// in iconics framework
<ion-icon name="logo-pinterest" class="ion-1x"></ion-icon>
<ion-icon name="logo-twitter" class="ion-2x"></ion-icon>

// without ionics framework
<i class="ion-1x ion-social-pinterest"></i>
<i class="ion-2x ion-social-twitter"></i>

Ответ 5

Чтобы сделать отзывчивый размер шрифта в соответствии с устройством для ionic2, Добавьте это в src/theme/variables.scss

// breakpoint mixin
@mixin breakpoint($mq01: 0, $mq2: false, $maxmin: max-width) {
  @if $mq2 == false {
      @media ($maxmin: $mq01) {
          @content;
      }
  }
  @else {
      @media (min-width: $mq01) and (max-width: $mq2) {
          @content;
      }
  }
}

// breakpoint variables
$lg: 1170px;
$md: 1024px;
$sm: 640px;
$xs: 480px;

// responsive font size mixin
@mixin font-size-map($font-size-map) {
    @each $breakpoint, $font-size in $font-size-map {
        @if $breakpoint == null {
            font-size: $font-size;
        } @else {
            @include breakpoint($breakpoint) {
                font-size: $font-size;
            }
        }
    }
}

// font sizes

$html-font-size: (null: 16px, $md: 15px, $sm: 14px, $xs: 13px);
$paragraph-font-size: (null: 18px, $lg: 17px, $md: 16px, $sm: 15px, $xs: 14px);

Ответ 6

Я использую Ionic для своих приложений, и именно так я имею дело с изменением размера:

• Найти класс/элемент, который необходимо изменить в CSS
• Установите padding:0 0 0 0; или нужные значения (сверху, снизу, внизу).
• Установить размер шрифта
• Установить высоту
• Установить высоту строки

Изменить: так я изменил свои вкладки

.tab-item{
    margin: 0;
    line-height: 100px;
    box-sizing: content-box;
    font-size: 40px;
    color:#FFFFFF;
    font-family: 'Roboto-Light';
    opacity: 1;
    max-width: 200px;
}