Определение поведения веб-шрифта по мере его загрузки может быть важным методом настройки производительности. Новый дескриптор font-display для @font-face позволяет разработчикам решать, как будут отображаться (или откатываться) их веб-шрифты в зависимости от того, сколько времени потребуется для их загрузки.
Различия в отображении шрифтов сегодня
Веб-шрифты дают разработчикам возможность включать в свои проекты богатую типографику, но при этом, если у пользователя еще нет шрифта, браузер должен потратить некоторое время на его загрузку. Поскольку сети могут быть нестабильными, это время загрузки может негативно повлиять на пользовательский опыт. В конце концов, никого не будет волновать, насколько красив ваш текст, если его отображение занимает непомерно много времени!
Чтобы снизить риск медленной загрузки шрифта, большинство браузеров реализуют тайм-аут, после которого будет использоваться резервный шрифт. Это полезный метод, но, к сожалению, браузеры различаются по фактической реализации.
| Браузер | Тайм-аут | Отступать | Менять |
|---|---|---|---|
| Хром 35+ | 3 секунды | Да | Да |
| Опера | 3 секунды | Да | Да |
| Firefox | 3 секунды | Да | Да |
| Интернет Эксплорер | 0 секунд | Да | Да |
| Сафари | Нет тайм-аута | Н/Д | Н/Д |
- Chrome и Firefox имеют трехсекундный тайм-аут, после которого текст отображается с резервным шрифтом. Если шрифт успевает загрузиться, то в конечном итоге происходит подмена и текст повторно отображается с предполагаемым шрифтом.
- Internet Explorer имеет нулевой тайм-аут, что приводит к немедленной отрисовке текста. Если запрошенный шрифт еще не доступен, используется резервный вариант, и текст повторно отображается позже, как только запрошенный шрифт становится доступным.
- Safari не имеет поведения по тайм-ауту (или, по крайней мере, не выходит за рамки базового сетевого тайм-аута).
Что еще хуже, разработчики имеют ограниченный контроль над тем, как эти правила повлияют на их приложение. Разработчик, ориентированный на производительность, может предпочесть более быстрый начальный опыт, использующий резервный шрифт, и использовать более удобный веб-шрифт только при последующих посещениях после того, как он успел загрузиться. Используя такие инструменты, как API загрузки шрифтов, можно переопределить некоторые из стандартных поведений браузера и добиться повышения производительности, но это достигается ценой необходимости писать нетривиальные объемы JavaScript, которые затем должны быть встроены в страницу или запрошены из внешнего файла, что приводит к дополнительной задержке HTTP.
Чтобы исправить эту ситуацию, рабочая группа CSS предложила новый дескриптор @font-face , font-display и соответствующее свойство для управления тем, как отображается загружаемый шрифт до его полной загрузки.
Хронология загрузки шрифтов
Подобно существующим режимам ожидания шрифта, которые сегодня реализуются некоторыми браузерами, font-display сегментирует жизненный цикл загрузки шрифта на три основных периода.
- Первый период — это период блокировки шрифта . В течение этого периода, если шрифт не загружен, любой элемент, пытающийся его использовать, должен вместо этого отрисовываться с невидимым резервным шрифтом. Если шрифт успешно загружается в течение периода блокировки, шрифт затем используется в обычном режиме.
- Период замены шрифта происходит сразу после периода блокировки шрифта. В течение этого периода, если шрифт не загружен, любой элемент, пытающийся его использовать, должен вместо этого отрисовываться с резервным шрифтом. Если шрифт успешно загружается в течение периода замены, шрифт затем используется в обычном режиме.
- Период отказа шрифта наступает сразу после периода замены шрифта. Если шрифт еще не загружен, когда начинается этот период, он помечается как неудачная загрузка, вызывая нормальный возврат шрифта. В противном случае шрифт используется нормально.
Понимание этих периодов означает, что вы можете использовать font-display чтобы решить, как должен отображаться ваш шрифт в зависимости от того, был ли он загружен и когда именно.
Какой вариант отображения шрифтов вам подходит?
Для работы с дескриптором font-display добавьте его в @font-face at-rules:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
В настоящее время font-display поддерживает следующий диапазон значений auto | block | swap | fallback | optional .
авто
auto использует ту стратегию отображения шрифта, которую использует user-agent. Большинство браузеров в настоящее время имеют стратегию по умолчанию, похожую на block .
блокировать
block задает шрифту короткий период блокировки (в большинстве случаев рекомендуется 3 с) и бесконечный период подкачки. Другими словами, браузер сначала рисует «невидимый» текст, если шрифт не загружен, но подменяет шрифт, как только он загружается. Для этого браузер создает анонимный шрифт с метриками, аналогичными выбранному шрифту, но со всеми глифами, не содержащими «чернил». Это значение следует использовать только в том случае, если для использования страницы требуется отображение текста в определенном шрифте.
менять
swap дает шрифту период блокировки ноль секунд и бесконечный период подкачки. Это означает, что браузер немедленно отрисовывает текст с резервным вариантом, если шрифт не загружен, но заменяет шрифт, как только он загружается. Подобно block , это значение следует использовать только в том случае, если для страницы важно отрисовать текст определенным шрифтом, но отрисовка любым шрифтом все равно передаст правильное сообщение. Текст логотипа является хорошим кандидатом для замены , поскольку отображение названия компании с использованием разумного резервного варианта передаст сообщение, но в конечном итоге вы будете использовать официальный шрифт.
отступать
откат дает шрифту чрезвычайно малый период блокировки (в большинстве случаев рекомендуется 100 мс или меньше) и короткий период подкачки (в большинстве случаев рекомендуется три секунды). Другими словами, шрифт сначала отображается с откатом, если он не загружен, но шрифт заменяется, как только загружается. Однако если проходит слишком много времени, откат будет использоваться до конца жизненного цикла страницы. откат является хорошим кандидатом для таких вещей, как основной текст, когда вы хотите, чтобы пользователь начал читать как можно скорее, и не хотите нарушать его опыт, перемещая текст по мере загрузки нового шрифта.
необязательный
необязательно задает шрифту чрезвычайно малый период блокировки (в большинстве случаев рекомендуется 100 мс или меньше) и период подкачки в ноль секунд. Подобно fallback , это хороший выбор, когда загружаемый шрифт скорее «приятно иметь», но не критичен для опыта. Необязательное значение оставляет браузеру право решать, инициировать ли загрузку шрифта, чего он может не делать или сделать с низким приоритетом в зависимости от того, что, по его мнению, будет лучше для пользователя. Это может быть полезно в ситуациях, когда у пользователя слабое соединение и загрузка шрифта может быть не лучшим использованием ресурсов.
Поддержка браузера
В настоящее время font-display находится под флагом «Экспериментальные функции веб-платформы» в настольной версии Chrome 49 и поставляется в Opera и Opera для Android.
Демо
Посмотрите пример , чтобы дать font-display шанс. Для разработчиков, ориентированных на производительность, это может стать еще одним полезным инструментом в вашем арсенале!