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

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с января 2020 года.

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

Синтаксис

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

Значения

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

Примечание: В Firefox настройки gfx.downloadable_fonts.fallback_delay и gfx.downloadable_fonts.fallback_delay_short задают продолжительность «короткого» и «чрезвычайно короткого» периодов соответственно.

Описание

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

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

Формальное определение

Формальный синтаксис

Примеры

Указание резервного `font-display`

@font-face {
  font-family: "ExampleFont";
  src: url("/path/to/fonts/example-font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

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

Спецификация
Модуль CSS Fonts, уровень 4 # font-display-desc

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`font-display`	60	79	58	47	11.1	60	58	44	11.3	11.0	60	11.3

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-display