2016-06-12 3 views
9

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

вещи я пытался:

  1. Изменение .tff, .eot, .woff, .svg файл непосредственно объединить свои шрифты и ionicons
  2. Пытался реализовать шрифт, указав его в HTML и css-файл (он работает, но я хочу, чтобы он был по умолчанию)
  3. Перезаписать www/lib/ionic/fonts с шрифтом open-sans (исчезают ионники)
  4. Когда я использую первую ссылку (все форматирование ушло , только слева с текстом и кнопками) Я также попытался помещать шрифт сверху и снизу в scss/ionic.ap p.scss

Пожалуйста, помогите! Ответы, которые я видел, являются инструкциями, но не объясняют, как это работает. Я не знаю, как работает ионная установка sass/что она делает. Как глоток играет в этом роль.

https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459

https://forum.ionicframework.com/t/change-font-family-and-use-ionicons-icons/26729

ответ

7

импортировать все font files в ваше приложение.

Пример:

@font-face { 
    font-family: 'Lato-Light'; 
    src: url('../fonts/Lato-Light.eot') format('embedded-opentype'), url('../fonts/Lato-Light.woff') format('woff'), url('../fonts/Lato-Light.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Если вы хотите этот шрифт в целом приложение, просто дать как этот

* { 
    font-family: 'Lato-Light' !important; 
} 

Если у вас есть doubt.Please позвольте мне know.Thanks

+3

Проблема с этим подходом заключается в том, что мои знаковые значки не работают из-за важной директивы. –

+3

Для меня было важно уйти! Важно и изменить переменные $ font-family-sans-serif и $ font-family-light-sans-serif в _variables.scss, чтобы мой шрифт был первым в списке. –

4

Для Ionic 2: Загрузите шрифты с сайта fonts.google.com и вставьте их в свою папку с ресурсами. Теперь в вашем файле SCSS сделать следующее:

@font-face { 
font-family: MyFont; 
src: url("../assets/fonts/Lato-Regular.ttf"); 
} 

body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title { 
font-family: 'MyFont' !important; 
} 
15

Правильным решением для ионического 2 должно быть, чтобы изменить $font-family-basevariable и его друг. Так поступает Ион. Это дает вам больше контроля (например, наличие разных шрифтов на платформу), и он избегает ключевого слова !important, что всегда хорошо.

Используя Ionic 3.3, перейдите к своему variables.scss и найдите раздел «Общие переменные». Добавьте эти строки:

$font-family-base: 'MyFont'; 
$font-family-ios-base: 'MyFont'; 
$font-family-md-base: 'MyFont'; 
$font-family-wp-base: 'MyFont'; 
+0

Это способ _correct_ сделать это – jdixon04

+0

Это должно быть отмечено как правильное решение. – user666

+0

Где вы помещали файлы шрифтов? & как вы их импортировали? – Melchia

0

Вы не хотите, чтобы заменить значок шрифта, кстати, так что вы должны использовать CSS3 нет() свойство

Например, в app.scss:

@import url(https://fonts.googleapis.com/css?family=Varela+Round); 

    *:not(ion-icon) { 
    font-family: 'Varela Round', sans-serif!important; 
    } 
Смежные вопросы