Час для чергового сполучення екранного сюжету! Цього разу у мене є Зак Леверман з Filament Group. Зак проводив багато досліджень, писав та говорив про завантаження веб-шрифтів за останні кілька років. У нього є вичерпний посібник!
Є деякі проблеми із способом завантаження нестандартних шрифтів за замовчуванням. Як і в, просто пов’язування шрифту в якомусь CSS через @ font-face. Навіть те, як Google Fonts надає вам можливість використовувати їх шрифти, Зак називає анти-візерунком (зрештою, це просто ваніль @ font-face). Різні браузери роблять різні речі за допомогою @ font-face. Наприклад, деякі версії Safari роблять набір шрифтів невидимим, поки шрифт не завантажується, але не має часу очікування, тому, якщо шрифт не вдається з будь-якої причини, ви можете потрапити в найгірший сценарій: вічно невидимий текст увімкнено сайт.
Ви не маєте великого контролю над тим, як завантажуються шрифти @ font-face, якщо ви не берете справи у свої руки. Це означає такі речі: вбудова шрифту, підстановка шрифту (або «критичним» набором гліфів, або, принаймні, зменшення гліфів до мови, що використовується), використання завантажувачів шрифтів для визначення, коли шрифти завантажуються, та зміна класів їх використання . Цей останній особливо цікавий. Здійснюючи контроль над завантаженням шрифтів, вам доведеться мати справу не тільки з тим, коли / як браузер завантажує CSS, що містить @ font-face, але і коли / як браузер стикається з текстовими елементами, яким сказано використовувати ці шрифти. Невикористані шрифти не завантажуються. Тому іноді процедура полягає в тому, щоб змусити їх завантажувати, чекати, поки вони завантажаться, а потім застосовувати класи, щоб насправді їх використовувати.
Деякі інструменти, які ми розглянули:
- Firefox DevTools був кращим для перегляду використовуваних шрифтів
- Підстановка шрифтів може бути виконана в генераторі Font Squirrel або в Font Prep.
- Які гліфи ви підгрупуєте? Перевірте, що вам потрібно, за певними URL-адресами за допомогою Glyphhanger.
- Як визначити, коли у браузері використовується жирний шрифт / курсив? штучна штука.