Лучшая практика/Стиль для импорта шрифта в веб-приложение angular 4 cli

Я работал над личным проектом Angular 4 и хотел добавить семейство шрифтов Ubuntu в мое приложение Angular. Какова наилучшая практика или стиль для добавления в проект нескольких пользовательских шрифтов? В настоящее время я сохранил семейство шрифтов ubuntu в /assets/fonts/ubuntu -font-family-0.83 и добавил его во внешний файл большинства компонентов CSS, app.component.css с шрифтом.

@font-face {
   font-family: 'Ubuntu';
   src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf');
}

Поместив это в исходный компонент, мне не нужно переопределять шрифт во вложенных компонентах, я просто рассматриваю его как семейство шрифтов по умолчанию.

Есть ли более четкий/лучший способ сделать это и все еще вырезать повторяющийся код?

Ответы

Ответ 1

Существует лучший способ включить шрифты на веб-сайт, а не только в angular приложение.

Оформить заказ https://fonts.google.com

Почему это лучше?

  • более высокая производительность
  • вероятность того, что у вашего клиента будет шрифт в кеше
  • Вам не нужно беспокоиться о прикреплении файлов и использовать свою начальную пропускную способность.

В вашем случае вы будете импортировать следующее в свой файл css:

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

Вы можете поместить его в основной файл .css, включенный в index.html. Или вы можете использовать тег <link> и включать шрифты в свои заголовки (также в index.html)

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

Ответ 2

Это лучший способ использовать шрифт Google локально с углом наклона 2,4,5,6,7 и более. Сначала загрузите шрифт Google, добавьте его в папку ресурсов и используйте в соответствии с вашими требованиями.

В angular.json вызывайте это в src/assets

"assets": [
    "src/assets"
 ],

В файле CSS добавьте это font-face вверху

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  font-weight:300;
}

Наконец, используйте его в соответствии с вашими требованиями, как

body{
 font-family: 'Montserrat', sans-serif;
}