Свойство CSS font-display

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

• auto
• block
• swap
• fallback
• optional

Раньше типографика ограничивалась локальными шрифтами, среди которых были только так называемые «безопасные для веба» (web-safe). Затем появилось @font-face правило, позволяющее загружать файлы шрифтов на сервер и задавать набор правил с именем шрифта и указанием браузеру, откуда их скачивать. Это дало толчок развитию сервисов, позволяющих использовать пользовательские шрифты. Однако файлы таких шрифтов могут быть большими и увеличивать время загрузки страницы.

Существовала ещё одна проблема, связанная с FOUT («вспышкой нестилизованного текста»). Браузеры отображали системный шрифт во время загрузки пользовательского. Это вызывало обеспокоенность, так как веб-дизайнеры считали это нарушением пользовательского опыта. Сегодня браузеры обычно скрывают текст до тех пор, пока пользовательский шрифт не будет загружен, что называется FOIT («вспышкой невидимого текста»).

Однако ни один из вышеперечисленных методов не идеален. Вместо этого теперь существует дескриптор font-display, который сообщает браузеру, что мы предпочитаем: FOUT или FOIT.

Начальное значение	auto
Применяется к	правилу @font-face.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS Fonts Module Level 4
Синтаксис DOM	object.style.fontDisplay = "swap";

Синтаксис

Синтаксис дескриптора CSS font-display

font-display: auto | block | swap | fallback | optional | initial | inherit;

Как использовать правило @font-face?

@font-face {
  font-family: 'MyWebFont';
  /* Define the custom font name */
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  /* Define where the font can be downloaded */
  font-display: optional;
}

Значения

Значение	Описание
auto	Отображение шрифта определяется браузером.
block	Устанавливает короткий период блокировки и бесконечный период обмена.
swap	Устанавливает для начертания шрифта очень короткий период блокировки и бесконечный период обмена.
fallback	Устанавливает для начертания шрифта очень короткий период блокировки и короткий период обмена.
optional	Устанавливает для начертания шрифта очень короткий период блокировки и отсутствие периода обмена.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какие значения может принимать CSS-свойство 'font-display'?

blockautoswapfallbackoptionalnone