Abr@X@bra.ru
CSS font-display: будущее рендеринга шрифтов
CSS font-display: будущее рендеринга шрифтов

CSS font-display: будущее рендеринга шрифтов

27.09.2017
78

Одним из недостатков использования веб-шрифтов является то, что если шрифт не доступен на устройстве пользователя, его необходимо загрузить. Это означает, что до того, как шрифт станет доступен, браузер должен решить, как обрабатывать отображение любого блока текста, который использует этот шрифт. И это необходимо сделать таким образом, чтобы это не оказывало существенного влияния на работу пользователя и воспринимаемую производительность.

С течением времени браузеры приняли несколько стратегий для смягчения этой проблемы. Но они делают это по-разному и вне контроля разработчиков, которым приходилось разрабатывать несколько методов и обходных решений для преодоления этих проблем.



Введите дескриптор шрифта для параметра @ font-face at-rule. Эта функция CSS вводит способ стандартизации этих действий и обеспечивает больше возможностей для разработчиков.

Использование шрифтов

Прежде чем подробно рассказывать о различных функциях, предлагаемых шрифтом, давайте кратко рассмотрим, как вы можете использовать эту функцию в своем CSS.

Прежде всего, font-display не является свойством CSS, но, как упоминалось во введении, это дескриптор для @ font-face at-rule. Это означает, что он должен использоваться внутри правила @ font-face, как показано в следующем коде:
@font-face {
  font-family: 'Saira Condensed';
  src: url(fonts/sairacondensed.woff2) format('woff2');
  font-display: swap;
}

В этом фрагменте я определяю значение свопинга для шрифта Saira Condensed.

Ключевые слова для всех доступных значений:

  • auto

  • block

  • swap

  • fallback

  • optional

Начальное значение font-display - auto. В последующих разделах я подробно рассмотрю каждое из этих значений. Но сначала давайте посмотрим на период времени, который браузер использует для определения шрифта, который будет отображаться. Обсуждая каждое из значений, я объясню различные аспекты временной шкалы и то, как они ведут себя для каждого значения.

font-display Timeline

В основе этой функции лежит концепция временной шкалы шрифта. Время загрузки шрифта, начиная с его запроса и заканчивая его успешной загрузкой или сбоем, можно разделить на три последовательных периода, которые определяют, как браузер должен отображать текст:

  • Невидимый шрифт. В течение этого периода браузер отображает текст с невидимым резервным шрифтом. Если запрошенный шрифт успешно загружен, текст перерисовывается с помощью этого шрифта. Невидимый запасной шрифт действует как пустой заполнитель для текста. Это уменьшает смещение макета при выполнении повторной рендеринга.

  • Период обмена. Если нужный шрифт еще недоступен, используется резервный шрифт, но на этот раз текст будет виден. Опять же, если загружается шрифт, он используется.

  • Период отказа. Если шрифт не станет доступен, браузер не дожидается его, и текст будет отображаться с резервным шрифтом в течение продолжительности текущего посещения страницы. Обратите внимание, что это не обязательно означает, что загрузка шрифта прерывается; вместо этого браузер может решить продолжить его использовать как основной при дальнейших посещениях страниц одним и тем же пользователем.

Настройка продолжительности таких периодов позволяет настроить стратегию визуализации текста. В частности, эти длительности могут начинаться от нуля или длиться до бесконечности.

Давайте посмотрим, как каждый из этих ключевых слов управляет процессом загрузки и отображения шрифтов.

font-display: auto

Это значение указывает браузеру принять поведение отображения шрифтов по умолчанию, выбранное браузером.

font-display: block

При этом значении (спецификация рекомендует длительность в три секунды) период подкачки расширяется до бесконечности. Это означает, что в этом случае период отказа отсутствует.

Хотя браузер ненадолго ждет требуемого шрифта, он отображает текст с невидимым резервным шрифтом; после этого, если шрифт еще недоступен, резервный шрифт становится видимым; и всякий раз, когда загрузка завершается, браузер повторно отображает текст с требуемым шрифтом.

font-display: swap

С этим значением период блока сворачивается в 0, а период подкачки продолжается до бесконечности. Следовательно, здесь также отсутствует период отказа.

Другими словами, браузер не ждет шрифта, но вместо этого сразу отображает текст с резервным шрифтом; то, всякий раз, когда шрифт доступен, текст перерисовывается.

font-display: fallback

Это первое значение, которое включает возможность отказа загрузки. После очень короткого периода (рекомендуется 100 мс). В результате, если запрошенный шрифт не будет готов к загрузке, текст будет отображаться с использованием резервного шрифта в течение всего времени посещения страницы.

font-display: optional

Когда я впервые прочитал спецификацию, я обнаружил, что имена, назначенные для отображения шрифтов, не так понятны.

Это даже указывается в самой спецификации, в которой предлагаются будущие версии имен использовать, по следующей альтернативе:

  • requires for block

  • important for swap

  • preferable for fallback

Но ожидается, что необязательное значение остается неизменным. Действительно, эта ценность прекрасно отражает суть поведения, которое она вызывает. В этом случае шрифт считается необязательным для рендеринга страницы, по сути говоря, в браузере: если шрифт уже доступен, используйте его, иначе это не имеет значения, загрузиться резервный шрифт.

При этом значении временная шкала отображения шрифтов имеет короткий период (опять же, спецификация рекомендует интервал времени 100 мс). А это означает, что если шрифт недоступен, он не будет использоваться в течение всего времени посещения страницы. Но шрифт в конечном итоге может быть полностью загружен в фоновом режиме, и поэтому он станет доступен для рендеринга при будущих загрузках страниц.

Заключительные слова

Надеюсь, этот пост даст вам достойный обзор font-display и того, как эта функция предвещает сильное будущее для рендеринга шрифтов.




CSS, font-display
Читайте также:
Верстка под Битрикс

Верстка под Битрикс

Хочу пробежаться сегодня вот по такой казалось бы ничем и неприметной всем привыкшей для понимания теме - верстка под Би...
Читать
Изменяем CSS переменные через JS

Изменяем CSS переменные через JS

SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ...
Читать
Готовить front-end стало еще проще

Готовить front-end стало еще проще

В этом посте расскажу вам об одном классном сервисе, который сделает жизнь front-end разработчика еще проще и быстрее.
Читать