CSS свойство font-display
Дескриптор font-display описывает, как браузер загружает и отображает шрифтовые файлы. Узнайте о значениях свойства font-display.
CSS-дескриптор font-display управляет поведением пользовательского веб-шрифта во время его загрузки: показывает ли браузер резервный текст сразу, скрывает ли текст до получения шрифта или вовсе отказывается от него. Это дескриптор, используемый внутри правила @font-face — не обычное свойство, применяемое к элементу.
На этой странице объясняется проблема загрузки, которую решает font-display, разбирается каждое из пяти его значений и даются практические рекомендации по выбору нужного.
Зачем нужен font-display
Изначально веб был ограничен небольшим набором «безопасных для веба» шрифтов, установленных на компьютере пользователя. Правило @font-face изменило это: теперь можно поставлять собственные шрифтовые файлы и указывать браузеру, откуда их загружать. Однако шрифтовые файлы могут быть большими, а загрузка занимает время. В течение этой задержки браузер должен решить, что отображать для текста, использующего данный шрифт. Существует два конкурирующих поведения:
- FOIT — flash of invisible text (мигание невидимого текста). Браузер скрывает текст до завершения загрузки пользовательского шрифта. На медленном соединении пользователь может несколько секунд смотреть на пустую страницу. Это поведение по умолчанию в большинстве браузеров.
- FOUT — flash of unstyled text (мигание неоформленного текста). Браузер немедленно показывает текст резервным шрифтом, а после загрузки пользовательского шрифта перерисовывает его. Содержимое доступно для чтения мгновенно, но при замене шрифта заметно «прыгает».
Ни один вариант не является универсально лучшим, поэтому font-display позволяет вам указать браузеру предпочтительный компромисс.
Три периода font-display
Каждое значение определяется тремя периодами временной шкалы, которые начинаются с момента начала загрузки шрифта:
- Период блокировки — текст отображается невидимо (но всё равно занимает место). Если шрифт загрузился в этот период, он используется. Если период завершился первым, браузер переходит к системному шрифту.
- Период подмены — текст отображается резервным шрифтом, но браузер заменит его пользовательским шрифтом, как только тот загрузится.
- Период отказа — браузер считает загрузку шрифта неудавшейся и сохраняет резервный шрифт, даже если шрифт позже всё-таки загрузится.
Каждое значение просто задаёт продолжительность периодов блокировки и подмены.
| Начальное значение | auto |
|---|---|
| Применяется к | правилу @font-face. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS Fonts Module Level 4 |
| DOM-синтаксис | object.style.fontDisplay = "swap"; |
Синтаксис
font-display: auto | block | swap | fallback | optional;Поскольку font-display является дескриптором, он размещается внутри блока @font-face рядом с font-family и src:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-display: swap; /* show fallback text immediately, then swap in the font */
}После этого шрифт используется как обычно. Дескриптор считывается автоматически при загрузке шрифта:
body {
font-family: 'MyWebFont', Arial, sans-serif;
}Значения
| Значение | Период блокировки | Период подмены | Что видит пользователь |
|---|---|---|---|
auto | по умолчанию браузера | по умолчанию браузера | То, что предпочитает браузер — обычно ведёт себя как block. |
block | короткий (~3 с) | бесконечный | Сначала невидимый текст, затем шрифт когда бы он ни загрузился (близко к FOIT). |
swap | нет / минимальный | бесконечный | Резервный текст мгновенно, заменяется пользовательским шрифтом при загрузке (FOUT). |
fallback | очень короткий (~100 мс) | короткий (~3 с) | Кратко невидимый текст, затем резервный; шрифт используется только при быстрой загрузке. |
optional | очень короткий (~100 мс) | нет | Резервный шрифт, если пользовательский не закеширован; без скачка при замене. |
Точная продолжительность периодов не фиксирована спецификацией — каждый браузер выбирает её самостоятельно. Приведённые значения — распространённые значения по умолчанию в Chrome и Firefox.
Какое значение выбрать?
swap— наиболее популярный выбор для основного текста. Содержимое читаемо мгновенно, что отлично сказывается на доступности и воспринимаемой производительности. Недостаток — заметный перерасчёт макета при замене шрифта.optional— лучший выбор, когда важнее избежать сдвигов макета, чем гарантировать отображение шрифта. Браузер использует пользовательский шрифт только при почти мгновенной загрузке (обычно из кеша); в противном случае остаётся резервный и замена никогда не происходит. Это сохраняет низкий показатель Cumulative Layout Shift.fallback— промежуточный вариант: короткий невидимый период, затем резервный шрифт с кратким шансом на замену. Хорошо подходит для шрифтов, которые желательны, но не критичны.blockподходит для иконочных шрифтов или брендинга, где неправильный глиф (например, резервный символ вместо иконки) выглядел бы неверно — лучше показать ничего, чем неправильное.autoоставляет решение браузеру и не даёт вам контроля, поэтому редко является осознанным выбором.
font-display— это дескриптор, а не свойство, поэтому ключевые словаinitialиinheritне применяются к нему так же, как к обычным CSS-свойствам.
Поддержка браузерами
font-display поддерживается всеми современными браузерами (Chrome, Edge, Firefox, Safari и Opera). В браузерах, не распознающих данное ключевое слово, дескриптор просто игнорируется, и применяется поведение загрузки по умолчанию, поэтому его безопасно использовать без резервного варианта.
Связанные свойства
- @font-face — правило, определяющее пользовательский шрифт и содержащее
font-display. - font-family — задаёт шрифт (включая резервный стек) для элемента.
- font-weight — управляет жирностью текста.
- font — сокращённое свойство для нескольких свойств шрифта одновременно.