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

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

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

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

Использование font-display

Прежде чем подробно рассмотреть различные функции, предоставляемые font-display , давайте кратко рассмотрим, как вы можете использовать эту функцию в своем 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; } 

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

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

• auto
• block
• swap
• fallback
• optional

Начальное значение для font-display — auto .

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

Временная шкала font-display

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

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

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

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

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

 h1 { font-family: 'Saira Condensed', Arial, "Helvetica Neue", Helvetica, sans-serif; }