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

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

  • auto
  • block
  • swap
  • fallback
  • optional

Свойство font-display сообщает браузеру, что использовать - FOUT (flash of unstyled text) или FOIT (flash of invisible text).

Значение по умолчанию auto
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Да
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.fontDisplay = "swap";

Синтаксис

front-display: auto | block | swap | fallback | optional | initial | inherit;
@font-face {
font-family: 'MyWebFont'; /* Укажите пользовательское название шрифта */
src:  url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Укажите, куда должен быть загружен шрифт */
font-display: fallback; /* Укажите, как работает браузер при загрузке */
}

Значения

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

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

chrome edge firefox safari opera
60.0+ 58.0+ 11.1+ 47.0+

Практикуйте свои знания

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