Описание

Дескриптор 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
Для шрифта задается очень короткий период блокировки и не задается период подмены.

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

[ auto | block | swap | fallback | optional ]

Примеры

@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' в этой спецификации.
Редакторский черновик Исходное описание

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 60 ? 46.0 (46.0)[2] Нет 36[1] ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка Нет ? 46.0 (46.0)[2] ? 37[1] ? 59.0[1]

[1] За флагом.

[2] Эта возможность доступна, начиная с версии Firefox 46 с настрокой layout.css.font-display.enabled, по умолчанию false.  См. (баг 1157064).

Метки документа и участники

 Внесли вклад в эту страницу: IgorLesnevskiy, FlowerDeLuce
 Обновлялась последний раз: IgorLesnevskiy,