Определение поведения веб-шрифта во время его загрузки может стать важным методом настройки производительности. Новый дескриптор 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 добавьте его в свои at-правила @font-face :
@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 использует любую стратегию отображения шрифта, которую использует пользовательский агент. Большинство браузеров в настоящее время имеют стратегию по умолчанию, похожую на блокировку .
блокировать
block дает шрифту короткий период блокировки (в большинстве случаев рекомендуется 3 секунды) и бесконечный период замены. Другими словами, браузер сначала рисует «невидимый» текст, если шрифт не загружен, но меняет начертание шрифта, как только он загружается. Для этого браузер создает анонимный шрифт с метриками, аналогичными выбранному шрифту, но со всеми глифами, не содержащими «чернил». Это значение следует использовать только в том случае, если для удобства использования страницы требуется отрисовка текста в определенном шрифте.
менять
swap дает шрифту период блокировки в ноль секунд и бесконечный период замены. Это означает, что браузер немедленно рисует текст с резервным вариантом, если шрифт не загружен, но меняет его, как только он загружается. Как и в случае с блоком , это значение следует использовать только в том случае, если рендеринг текста определенным шрифтом важен для страницы, но рендеринг любым шрифтом все равно обеспечит правильное сообщение. Текст логотипа — хороший кандидат на замену, поскольку отображение названия компании с использованием разумного запасного варианта позволит передать сообщение, но в конечном итоге вы будете использовать официальный шрифт.
отступать
Резервный вариант дает шрифту очень маленький период блокировки (в большинстве случаев рекомендуется 100 мс или меньше) и короткий период замены (в большинстве случаев рекомендуется три секунды). Другими словами, шрифт сначала отображается с запасным вариантом, если он не загружен, но шрифт заменяется, как только он загружается. Однако если пройдет слишком много времени, резервный вариант будет использоваться до конца жизни страницы. Резервный вариант — хороший кандидат для таких вещей, как основной текст, когда вы хотите, чтобы пользователь начал читать как можно скорее, и не хотите мешать ему работать, перемещая текст по мере загрузки нового шрифта.
необязательный
Необязательный параметр дает шрифту очень маленький период блокировки (в большинстве случаев рекомендуется 100 мс или меньше) и период замены в ноль секунд. Как и в случае с запасным вариантом , это хороший выбор, когда загружаемый шрифт скорее «приятен», но не критичен для работы. Необязательное значение оставляет браузеру право решать, начинать ли загрузку шрифта, которую он может решить не делать или сделать это с низким приоритетом в зависимости от того, что, по его мнению, будет лучше для пользователя. Это может быть полезно в ситуациях, когда у пользователя слабое соединение и удаление шрифта может быть не лучшим использованием ресурсов.
Поддержка браузера
font-display в настоящее время находится под флагом «Экспериментальные функции веб-платформы» в Chrome 49 для настольных компьютеров и поставляется в Opera и Opera для Android.
Демо
Ознакомьтесь с примером, чтобы попробовать font-display . Для разработчиков, ориентированных на производительность, это может стать еще одним полезным инструментом в вашем арсенале!