font-display

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