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

Видите ли, существует ряд блогов, в которых излагаются плюсы и минусы и, вероятно, лучше объясняется то, что я здесь делаю, более подробно. Но я также понимаю, что вы, вероятно, не хотите тратить уйму времени на чтение обширных статей о - ШРИФТАХ.

Итак, это моя попытка предоставить вам мои выводы и, возможно, шаги GO-TO для импорта шрифтов.

Есть два способа импортировать шрифты в наше приложение Angular. Либо мы можем использовать CDN, в котором шрифты размещены на удаленных серверах, либо мы можем развернуть шрифты на наших собственных серверах, а затем импортировать их в приложение.

Импорт шрифтов с помощью CDN

Некоторые выступают за импорт шрифтов Google с использованием CDN. Примечательна легкость, с которой работает CDN. Это не только молниеносно, но и уменьшает размер пакета всего приложения.

Этот метод имеет ряд преимуществ перед последним, поскольку CDN включает (большую часть времени) все варианты шрифта - полужирный, курсив, регулярный, полужирный и т. Д., А также кроссбраузерность.

Чтобы импортировать шрифт с помощью CDN, просто вставьте следующий фрагмент кода в ваш style.scss или style.css файл в вашем проекте Angular.

Шрифт из Google Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

Преимущества

  1. Это не будет стоить вам или конечным пользователям много, если не незначительно.
  2. Незначительное отсутствие проблем с лицензированием.

Проблема:

  1. Существует ряд проблем с использованием шрифтов, размещенных на CDN, таких как проблемы с высокой задержкой и лазейки в безопасности.
  2. Когда вы используете шрифты CDN, приложение Angular отправляет запрос на получение CSS в другой домен, который рассматривается как задача с низким приоритетом.
  3. Некоторые браузеры могут плохо разбираться в загрузке шрифтов через CDN. Если быть точным, у некоторых шрифтов есть латинская и нелатинская версии. Есть браузеры, которые не настроены на игнорирование типа шрифта, который не является обязательным и загружает как латинский, так и нелатинский шрифт. Это увеличивает скорость загрузки.

НАСТОЯЩАЯ СДЕЛКА: веб-шрифты на собственном хостинге

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

Прекратите объяснять, покажите мне, как это сделать !!

Хорошо! Хорошо! - Холод!

Итак, давайте импортируем один из самых знаменитых шрифтов - Lato.

Шаг 1. Загрузите шрифт

Мы не будем загружать весь шрифт. Мы просто скачаем то, что нужно.

  1. Обычный
  2. Жирный
  3. Черный (как бы супер-жирный)

Шаг 2: Выпустите зверя!

Вы увидите, что есть и другие файлы, помимо трех выбранных шрифтов, таких как Thin и Light. У вас также будут выделенные курсивом версии каждого шрифта. Я буду использовать черный, полужирный, светлый и обычный шрифты.

После извлечения загруженной папки создайте папку fonts в папке с ресурсами в приложении Angular. Создайте подпапки с именами, соответствующими весу шрифта.

Теперь создайте папку scss в папке с ресурсами, в которой мы объявим значения @font -face. Создайте подпапку с названием modules и в ней создайте файл _fonts.scss.

Шаг 3: Transfonter - Создайте @font -face

Используя transfonter.org, мы сгенерируем @font -символы для каждого шрифта, который мы хотим добавить.

Я буду генерировать начертание @font для следующих шрифтов, игнорируя курсивные версии. Если мне нужно сделать шрифт курсивным, я буду использовать font-style: italic;.

Теперь, используя Transfonter, добавьте и сконвертируйте каждый шрифт. Вы можете выбрать все шрифты за один раз и также преобразовать их.

Теперь преобразуйте шрифты и загрузите набор шрифтов @font. Извлеките шрифты, и вы получите:
a) файлы .woff и .woff2 для всех шрифтов
b) демонстрационный файл - чтобы увидеть все шрифты
c) таблицу стилей, содержащую все ваши @font -face

Переместите файлы .woff и .woff2 в соответствующие папки в папке assets / fonts.

Скопируйте код из stylesheet.css и вставьте его в _font.scss. Укажите правильный путь к шрифту из папки assets / font для каждого шрифта. Укажите правильный font-weight для каждого шрифта. Вы можете получить подсказку по весу шрифта, указанному рядом с именем шрифта, в которое вы загружаете шрифт.

@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Thin/Black/Lato-Black.woff2') format('woff2'),
    url('assets/fonts/Thin/Black/Lato-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

Последний шаг - импортировать _font.scss файл в главную таблицу стилей вашего приложения angular - style.scss.

Шаг 4. Используйте свой тяжелый труд с пользой

//----------------------------------*\
// Fonts
//----------------------------------*/
@import 'assets/scss/modules/_fonts.scss';

// primary font
$primary_font: 'Lato';
// font-weight
$thin:100;
$light:300;
$regular:400;
$bold:700;
$black:900;
// Font size
$font-xs:12px;
$font-sm: 14px;
$primary-fs: 16px;
$font-md: 18px;
$font-lg: 20px;
body {
    font-family: $primary_font;
    font-size: $primary-fs;
    font-weight: $regular;
}

Шаг 5: Paartaaay !!

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

Поделитесь им с друзьями и коллегами, занимающимися веб-разработкой. Я знаю, что это было оооочень… но это, несомненно, дает желаемые результаты.

Изначально опубликовано в моем техническом блоге.

Предложения / отзывы приветствуются.
Электронная почта: [email protected]
Телефон: + 91–8447478305