ШрифтFace: свойство display
Базовая линия Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.
Примечание: Эта функция доступна в Потоках выполнения в браузере.
Свойство display интерфейса FontFace определяет, как шрифт отображается в зависимости от того, загружен ли он и готов к использованию. Это свойство эквивалентно описателю CSS font-display.
При использовании этого свойства загрузка шрифта имеет временную шкалу с тремя периодами. Длительность первых двух периодов зависит от значения свойства и пользовательского агента. (См. ниже.)
- период блокировки
-
Браузер незаметно подготавливает резервный шрифт. Если шрифт загрузится за это время, он будет использован для отображения текста, и отображение будет завершено.
- период переключения
-
Если шрифт все еще не загружен, будет показан резервный шрифт. Когда шрифт загрузится, резервный будет заменен загруженным шрифтом.
- период сбоя
-
Если шрифт все еще не загружен, будет показан резервный шрифт, и переключение не произойдёт.
Значение
Строка с одним из следующих значений.
auto-
Используйте стратегию отображения шрифта, предоставленную пользовательским агентом.
block-
Присваивает шрифту короткий период блокировки и бесконечный период переключения. Спецификация рекомендует 3 секунды для периода блокировки, хотя это может варьироваться в зависимости от браузера.
fallback-
Присваивает шрифту короткий период блокировки и короткий период переключения. Спецификация рекомендует 100 мс или меньше для периода блокировки и 3 секунды для периода переключения, хотя эти значения могут варьироваться в зависимости от браузера.
optional-
Присваивает шрифту короткий период блокировки и отсутствие периода переключения. Спецификация рекомендует 100 мс или меньше, хотя это может варьироваться в зависимости от браузера.
swap-
Присваивает шрифту 0 секунд периода блокировки и бесконечный период переключения.
Спецификации
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | |
display |
60 | 79 | 58 | 47 | 11.1 | 60 | 58 | 44 | 11.3 | 8.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/API/FontFace/display