font-display

Описание

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

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

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

Период блокировки шрифта (Font block period)
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
Период подмены шрифта (Font swap period)
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
Период отказа шрифта (Font failure period)
Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.

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

Синтаксис

/* Значения свойства */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Значения

auto
Стратегию загрузки шрифта определяет пользовательский агент.
block
Для шрифта задаётся короткий период блокировки и бесконечный период подмены.
swap
Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.
fallback
Для шрифта задаётся очень короткий период блокировки и короткий период подмены.
optional
Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.

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

[ (en-US) auto | (en-US) block | (en-US) swap | (en-US) fallback | (en-US) optional ] (en-US)

Примеры

@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 Status Comment
CSS Font Rendering Controls Module Level 1
Определение 'font-display' в этой спецификации.
Черновик Исходное описание

Поддержка браузерами

BCD tables only load in the browser