ионный шрифт по умолчанию

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

Вещи, которые я пробовал:

  1. Изменение файла.tff,.eot,.woff,.svg непосредственно для слияния моих шрифтов и иониконов
  2. Попробовал реализовать шрифт, указав его в файле html и css (он работает, но я хочу, чтобы он был по умолчанию)
  3. Перезапишите www/lib/ionic/fonts с шрифтом open-sans (исчезают ионники)
  4. Когда я использую первую ссылку (все форматирование ушло, осталось только текст и кнопки), я также попытался помещать шрифт сверху и снизу в scss/ionic.app.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

ОТВЕТЫ

Ответ 1

Импортируйте все 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;
}

Если у вас есть сомнения. Пожалуйста, дайте мне знать. Спасибо.

Ответ 2

Правильное решение для Ionic 2 должно состоять в изменении переменной $font-family-base и ее друзей. То, как Ион сделал это сделать. Это дает вам больше контроля (например, наличие разных шрифтов на платформу), и это позволяет избежать !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';

Ответ 3

Для 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;
}

Ответ 4

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

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

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

  *:not(ion-icon) {
    font-family: 'Varela Round', sans-serif!important;
  }