font-display

Властивість font-display визначає як font face відображаєтся стосовно як він завантижився і готовий до використання.

Хронологія відображення шрифта

Хронологія відображення шрифта залежить від часу на початку завантаження шрифта та його використання. Типи хронології поділені на три частини які вказують поведінку відображення усих елементів які використовують цей шрифт.

Блокування шрифту(block)
Якщо шрифт не завантажений, усі елементи які очікують на його використання мають відображатись невидимими(invisible). Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.
Заміна шрифту(swap)
Якщо шрифт не завантажений, усі елементи що очікують на його використання , мають використати запасний шрифт. Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.
Невдача(failure)
Якщо шрифт не був завантажений, клієнт відображає його як невдачно завантажений, що викликає звичайне резервування шрифту.

Related at-rule@font-face
Initial value (en-US)auto
Computed value (en-US)as specified

Синтаксис

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

Значення

auto
Відображення шрифту виконуєтся автоматично клієнтом.
block
Надає елементам короткий період блокування і нескінченний swap період.
swap
Надає надзвичайно малий період блокування і нескінченний період підміни шрифту.
fallback
Надає надзвичайно малий період блокування і малий період підміни шрифту.
optional
Надає надзвичайно малий період блокування без підміни шрифту.

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

[ (en-US) auto | (en-US) block | (en-US) swap | (en-US) fallback | (en-US) optional ] (en-US)

Приклад

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

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

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-display' in that specification.
Working Draft Initial definition

Сумісність з браузерами

BCD tables only load in the browser