Пришло время еще одного скринкаста по сопряжению! На этот раз у меня есть Зак Лезерман из Filament Group. За последние несколько лет Зак провел много исследований, писал и говорил о загрузке веб-шрифтов. У него есть подробное руководство по этому поводу!
Есть некоторые проблемы со способом загрузки пользовательских шрифтов по умолчанию. Например, просто связать шрифт в некотором CSS через @ font-face. Даже то, как Google Fonts предлагает вам использовать свои шрифты, Зак называет антипаттерном (в конечном итоге это просто vanilla @ font-face). Различные браузеры делают разные вещи с @ font-face. Например, некоторые версии Safari делают тип установленным в пользовательском шрифте невидимым до загрузки шрифта, но не имеют тайм-аута, поэтому, если шрифт не работает по какой-либо причине, вы можете оказаться в худшем случае: навсегда невидимый текст на сайт.
У вас нет особого контроля над загрузкой шрифтов @ font-face, если вы не возьмете дело в свои руки. Это означает такие вещи, как: встраивание шрифта, подмножество шрифта (либо с «критическим» набором глифов, либо, по крайней мере, сокращение глифов до используемого языка), использование загрузчиков шрифтов для определения момента загрузки шрифтов и изменение классов для их использования. . Последнее особенно интересно. Осуществляя контроль над загрузкой шрифтов, вы должны иметь дело не только с тем, когда и как браузер загружает CSS, содержащий @ font-face, но также когда и как браузер сталкивается с текстовыми элементами, которым предписано использовать эти шрифты. Неиспользуемые шрифты не загружаются. Поэтому иногда процедура состоит в том, чтобы заставить их загрузиться, подождать, пока они загрузятся, а затем применить классы для их фактического использования.
Некоторые инструменты, которые мы рассмотрели:
- Firefox DevTools лучше подходил для просмотра используемых шрифтов
- Подмножество шрифтов можно выполнить в генераторе Font Squirrel или в Font Prep.
- Какие глифы вы подбираете? Проверьте, что вам нужно, по определенным URL-адресам с помощью Glyphhanger.
- Как узнать, что в браузере используется искусственный полужирный / курсив? бестактность.