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	Значение элемента наследуется от родительского элемента.