У 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-faceдескриптором, а не властивістю, тому його підтримку в браузері не можна перевірити за допомогою функціональних запитів (@supportsправило CSS та API CSS.supports).
Більше інформації
- Модуль керування візуалізацією шрифтів CSS Рівень 1 Специфікація: проект специфікації для властивості.
font-displayдля мас: Джеремі Вагнер познайомив нас з власністю тут на CSS-Tricks.- Використання
@font-face: Вичерпне пояснення правила та найкращих практик використання. - Стек системних шрифтів: Фрагмент для відмови від користувацьких шрифтів у цілому і покладається виключно на системні шрифти користувача.
- Контроль продуктивності шрифтів за допомогою
font-display: Прекрасне написання теми Google.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 60 | 58 | Ні | 79 | 11.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |