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

Question

Я использую ионную структуру (с кордовой) для разработки мобильных приложений. Что я хочу сделать, так это увеличить размер шрифта (как правило, в моем приложении).

Я видел это в официальной документации: http://ionicframework.com/tutorials/customizing-ionic-with-sass/. Но я не понимаю, как настроить, как только sass работает.

Я работаю в закладках на основе приложения, как, что: http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png Я попытался вручную добавить класс на вкладке, но результат не очень чистый ... текст обрезается ...

Есть ли официальный способ изменить размер шрифта?

Answer 1

Я думаю, что вам не нужно undersand все на Сассе. В каталоге проекта, в

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

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

Answer 2

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

1. Найти/элемент класса, который вам нужно изменить в CSS
2. Set padding:0 0 0 0; или значения, которые вы хотите (вверху, справа, снизу, слева).
3. Установить размер шрифта
4. высота Set
5. Set высота линии

Edit: Это, как я изменил мои вкладки элементы

.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; 
} 

Answer 3

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

В принципе, 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"; заявления.

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

Answer 4

Поиск вашего проекта/WWW/CSS и редактировать style.css, и внутри записи файла:

{font-size:55px !important;} 

изменения в 55 пикселей независимо от размера вам нужно.

Answer 5

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

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> 

Answer 6

Для того, чтобы реагировать размер шрифта в соответствии с устройством для ionic2, Добавить это в ИПВ/тема/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);

Включает переменную в локальном scss, добавляя: @include font-size-map ($ html-font-size);

// html 

html { 
    @include font-size-map($html-font-size); 
} 

p { 
    @include font-size-map($paragraph-font-size); 
}