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-face`
Начальное значение	`auto`
Вычисленное значение	как указано

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

font-display = 
  auto      |
  block     |
  swap      |
  fallback  |
  optional

Примеры

Указание резервного шрифта font-display

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

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

Спецификация
CSS Fonts Module Level 4 # font-display-desc

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-display`	60	79	58	47	11.1	60	58	44	11.3	11.0	60

См. также

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