Одна из горячих дискуссий, которые я веду с другими разработчиками, касается правильного и наиболее эффективного способа импорта шрифтов в приложение 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');
Преимущества
- Это не будет стоить вам или конечным пользователям много, если не незначительно.
- Незначительное отсутствие проблем с лицензированием.
Проблема:
- Существует ряд проблем с использованием шрифтов, размещенных на CDN, таких как проблемы с высокой задержкой и лазейки в безопасности.
- Когда вы используете шрифты CDN, приложение Angular отправляет запрос на получение CSS в другой домен, который рассматривается как задача с низким приоритетом.
- Некоторые браузеры могут плохо разбираться в загрузке шрифтов через CDN. Если быть точным, у некоторых шрифтов есть латинская и нелатинская версии. Есть браузеры, которые не настроены на игнорирование типа шрифта, который не является обязательным и загружает как латинский, так и нелатинский шрифт. Это увеличивает скорость загрузки.
НАСТОЯЩАЯ СДЕЛКА: веб-шрифты на собственном хостинге
Чтобы не усложнять - как действительно простые, самодостаточные шрифты предоставляют вам лучший контроль над шрифтом. Вы можете настроить стиль и вес по своему усмотрению. Это немного многословный процесс, но да, ваше приложение Angular не будет ломаться, отставать или показывать мерцание из-за проблемы с резервным шрифтом.
Прекратите объяснять, покажите мне, как это сделать !!
Хорошо! Хорошо! - Холод!
Итак, давайте импортируем один из самых знаменитых шрифтов - Lato.
Шаг 1. Загрузите шрифт
Мы не будем загружать весь шрифт. Мы просто скачаем то, что нужно.
- Обычный
- Жирный
- Черный (как бы супер-жирный)
Шаг 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