font-display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Описание

Дескриптор font-display определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

Временная шкала отображения шрифтов

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

Период блокировки шрифта (Font block period)

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

Период подмены шрифта (Font swap period)

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

Период отказа шрифта (Font failure period)

Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.

Связано с @-правила@font-face
Начальное значениеauto
Обработка значениякак указано

Синтаксис

css
/* Ключевые слова */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Значения

auto

Стратегию загрузки шрифта определяет пользовательский агент.

block

Для шрифта задаётся короткий период блокировки и бесконечный период подмены.

swap

Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.

fallback

Для шрифта задаётся очень короткий период блокировки и короткий период подмены.

optional

Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.

Официальный синтаксис

font-display = 
  auto      |
  block     |
  swap      |
  fallback  |
  optional

Примеры

css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

Спецификации

Specification
CSS Fonts Module Level 4
# font-display-desc

Совместимость с браузерами

BCD tables only load in the browser