В font-displayсвойство определяет , как файлы шрифтов загружаются и отображаются в браузере. Он применяется к @font-faceправилу, определяющему пользовательские шрифты в таблице стилей.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Значения
font-displayСвойство принимает пять значений:
auto(по умолчанию): позволяет браузеру использовать метод загрузки по умолчанию, который чаще всего совпадает соblockзначением.block: Указывает браузеру на короткое время скрыть текст, пока шрифт не загрузится полностью. Точнее, браузер рисует текст с невидимым заполнителем, а затем меняет его местами с настраиваемым шрифтом, как только он загружается. Это также известно как «вспышка невидимого текста» или FOIT.swap: Указывает браузеру использовать резервный шрифт для отображения текста до тех пор, пока пользовательский шрифт не будет полностью загружен. Это также известно как «вспышка нестилизованного текста» или FOUT.fallback: Действует как компромисс междуautoиswapценностями. Браузер будет скрывать текст примерно на 100 мс и, если шрифт еще не загружен, будет использовать резервный текст. Он будет заменен новым шрифтом после его загрузки, но только в течение короткого периода обмена (вероятно, 3 секунды).optional: Напримерfallback, это значение указывает браузеру сначала скрыть текст, а затем перейти к резервному шрифту, пока пользовательский шрифт не станет доступным для использования. Однако это значение также позволяет браузеру определять, используется ли пользовательский шрифт вообще, используя скорость подключения пользователя в качестве определяющего фактора, при котором более медленные подключения с меньшей вероятностью получат пользовательский шрифт.
Вот еще один способ думать о них
| Период блокировки | Срок свопа | |
|---|---|---|
| блокировать | короткий | Бесконечный |
| замена | Никто | Бесконечный |
| отступать | Чрезвычайно короткий | короткий |
| необязательный | Чрезвычайно короткий | Никто |
Зачем нам нужны font-display
До того, как у нас появилась широкая поддержка @font-face, наш типографский арсенал был ограничен локальными шрифтами, где единственными доступными шрифтами были те, которые были предварительно загружены на компьютер конечного пользователя. Мы называем эти шрифты «веб-безопасными», потому что браузеру не нужно ничего загружать для их отображения.
Затем появилось @font-faceправило, которое дало веб-дизайнерам и интерфейсным разработчикам новые типографские возможности, которых не было раньше. Это позволило нам загружать файлы шрифтов на сервер и записывать набор правил в наших таблицах стилей, которые дают имя шрифту и сообщают браузеру, где загружать файлы. Это также привело к появлению таких сервисов, как Google Fonts, которые принесли в массы пользовательские шрифты. Наконец, основное препятствие, отделявшее веб-дизайн от полиграфического, было устранено!
Однако пользовательские шрифты приходили (и продолжают появляться) за свою цену. Файлы шрифтов могут быть большими, и дополнительное время для загрузки файлов может снизить производительность сайта, особенно для устройств с более медленным сетевым подключением. Дополнительные расходы для пользователей с ограниченными тарифными планами также стали фактором.
Еще одна особая проблема, которая возникла с пользовательскими шрифтами, - это то, что было названо «вспышкой нестилизованного текста» или сокращенно FOUT. Браузеры по умолчанию будут отображать системный шрифт, ожидая загрузки пользовательского шрифта. Это позволяло веб-страницам загружаться быстрее, но вызывало опасения у веб-дизайнеров, которые считали это нарушением пользовательского опыта и искажением предполагаемого дизайна. Сегодняшние веб-браузеры обычно скрывают текст до тех пор, пока не будет загружен пользовательский шрифт, что мы теперь называем «вспышкой невидимого текста» или FOIT.
Ни FOUT, ни FOIT не хороши. У нас есть способы оптимизировать производительность пользовательских шрифтов, чтобы облегчить эффекты. Однако теперь мы должны font-displayуказать браузеру, предпочитаем ли мы FOUT, FOIT или даже что-то среднее.
Тестирование на поддержку
Шиме Видас отмечает интересную оговорку:
CSS font-display - это
@font-faceдескриптор, а не свойство, поэтому его поддержку в браузере нельзя проверить с помощью запросов функций (@supportsправила CSS и CSS.supports API).
Дополнительная информация
- CSS Font Rendering Controls Module Level 1 Specification: Черновик спецификации для свойства.
font-displayдля масс: Джереми Вагнер познакомил нас с этим свойством здесь, на CSS-Tricks.- Использование
@font-face: исчерпывающее объяснение правила и лучших практик его использования. - Стек системных шрифтов: фрагмент кода, позволяющий полностью отказаться от пользовательских шрифтов и полагаться исключительно на системные шрифты пользователя.
- Управление производительностью шрифтов с помощью
font-display: Хорошая статья по теме от Google.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 60 | 58 | Нет | 79 | 11.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 11,3-11,4 |