Дескриптор CSS-правила `font-display`

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

Синтаксис

/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Значения

auto

Стратегия отображения шрифта определяется пользовательским агентом.

block

Задаёт для начертания шрифта короткий период блокировки, обычно около 3 секунд, и бесконечный период подмены.

swap

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

fallback

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

optional

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

Описание

Дескриптор font-display для @font-feature-values определяет временную шкалу отображения шрифта; он делает это, устанавливая значение font-display по умолчанию для @font-face с тем же именем font-family. Если font-display не задан в @font-face, пользовательский агент сначала ищет значение font-display, заданное с помощью @font-feature-values для соответствующего семейства шрифтов. Если значение не найдено, пользовательский агент использует значение auto для font-display, и в этом случае пользовательский агент определяет стратегию отображения шрифта.

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

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

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

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

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

Примеры

@font-feature-values "Leitura" {
  font-display: swap;
  @swash {
    fancy: 1;
  }
}

Дескриптор font-display в этом примере задаёт значение font-display по умолчанию для шрифта «Leitura» — swap для всех блоков @font-face. В одном семействе шрифтов может быть несколько блоков @font-face, импортирующих несколько файлов шрифтов. Если один из этих блоков @font-face содержит дескриптор font-display, указанное значение будет использоваться только для соответствующего файла шрифта. Во всех остальных блоках, не содержащих дескриптор font-display, по умолчанию будет использоваться swap вместо стандартного значения auto пользовательского агента.

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

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

В настоящее время ни один браузер не поддерживает эту функцию.

См. также

• дескриптор font-display правила @font-face
• модуль CSS Fonts