Від автора: якщо шрифт відсутній на мобільному пристрої, його необхідно завантажити. Це один з мінусів веб-шрифтів. Поки шрифт не стане доступним, яку потрібно вирішити, як відобразити блок тексту з цим шрифтом. І зробити це потрібно так, щоб зміна шрифтів несильно вплинула на UX і сприйняття продуктивності.
З часом браузери прийняли різні стратегії, щоб мінімізувати цю проблему. Але ці стратегії працюють по-різному, і розробники зовсім не контролюють процес. Розробникам доводилося розробляти різні техніки і способи вирішення цих проблем. У цій статті ми розберемо, як в даному випадку може вплинути на шрифти CSS.
Зустрічайте дескриптор font display CSS правила @font-face. Це CSS властивість являє стандартизований підхід до даного поведінки і дозволяє розробникам контролювати процес.
Використання font-display
Перш ніж докладно розібрати різні функції font-display, давайте швидко поглянемо, як використовувати його в CSS. Насамперед font-display не є властивістю CSS. Як було сказано на початку, це дескриптор правила @font-face. (приклад):
@font-face {
font-family: ‘Saira Condensed’;
src: url(fonts/sairacondensed.woff2) format(‘woff2’);
font-display: swap;
}
У цьому коді я ставлю значення swap для шрифту Saira Condensed. Всі можливі значення: auto, block, swap, fallback, optional
Значення за замовчуванням для font-display – auto.
У наступних розділах я докладно розберу всі ці значення. Але спочатку давайте обговоримо часовий період, з допомогою якого браузер рендерить шрифт. У розборі значень я поясню різні аспекти таймлайна, а також як вони поводяться з кожним значенням.
Таймлайн font-display
В основі цієї функції лежить концепція таймлайна font-display. Час завантаження шрифту, яке починається від його запиту і кінчається або успішної завантаженням, або провалом, можна розділити на три послідовних періоди, які говорять браузеру, як рендери текст. Три періоду:
Блочний період. У цьому періоді браузер рендерить текст невидимим фолбек шрифтом. Якщо запитаний шрифт завантажується, текст перемальовується з цим шрифтом. Невидимий фолбек шрифт веде себе, як порожній плейсхолдер для тексту. Таким чином, мінімізуються зрушення макета при повторному рендерінгу.
Період підміни: якщо необхідний шрифт ще не доступний, використовується фолбек шрифт. Тільки в цей раз текст вже відображається. Шрифт буде задіяний, як тільки він довантажити.
Період відмови: якщо шрифт так і не став доступним, браузер не чекає його, і текст відображається з фолбек шрифтом, поки сторінка не буде закрита. Однак це не означає, що завантаження шрифту була перервана. Браузер може продовжити завантаження, і шрифт буде готовий до відображення при відвідуванні інших сторінок.
Настроювання тривалості таких періодів дозволяє конфігурувати кастомний стратегію фонового тексту. Зокрема, ці значення можна встановити в 0 або в нескінченність, що я покажу в наступних розділах.
Тим не менш, розробники не можуть явно встановлювати ці затримки. Таку можливість розглядали в специфікації на ранньому етапі, але пізніше від неї відмовилися. Замість цього, як було сказано в попередньому розділі, у нас є набір значень ключових слів, який покриває велику частину випадків використання.
Давайте розглянемо, як всі ці значення управляють завантаженням і відображенням шрифтів.
font-display: auto
Після короткого блокового періоду це значення збільшує період підміни до нескінченності (в специфікації рекомендують 3 секунди). У такому разі період відмови відсутня.
Браузер короткий час чекає шрифт і рендерить текст невидимим шрифтом. Далі якщо шрифт не доступний, фолбек шрифт стає видимим. Як тільки завершується завантаження потрібного шрифту, браузер повторно рендерить текст.
Описане поведінка показано у відео нижче, де використовується проста тестова сторінка зі спеціальним шрифтом в заголовку:
Your browser does not support the video tag.
На початку завантаження сторінки заголовок невидимий, але він присутній в DOM. Приблизно через 3 секунди якщо шрифт все ще не доступний, тексту стає видимим з фолбек шрифтом. У демо відео я імітую слабке з’єднання за допомогою панелі розробника Chrome. Як тільки шрифт завантажується, заголовок повторно рендерится.
font-display: swap
З цим значенням блоковий період стискається до 0, а період підміни досягає нескінченності. Тут також відсутня період відмови. Іншими словами, браузер не чекає шрифт і відразу рендерить текст з фолбек шрифтом. Як тільки шрифт завантажується, текст рендерится заново. Давайте перевіримо:
Your browser does not support the video tag.
font-display: fallback
Це перше значення, в якому є період відмови. Після дуже короткого блокового періоду (рекомендується 100ms) настає короткий період підміни (рекомендується 3s). Якщо до кінця цього часу шрифт все ще не готовий, текст буде відображатися з фолбек шрифтом на весь час відвідування сторінки. Відвідувачів не дратують зрушення в макеті, які можуть знизити UX. У першому відео нижче шрифт завантажується після більш ніж 6 секунд, тому він ніколи не буде застосовано:
Your browser does not support the video tag.
У наступному відео шрифт завантажується швидше до таймауту, тому шрифт використовується, як очікувалося:
Your browser does not support the video tag.
font-display: optional
Коли я вперше прочитав специфікацію, я не дуже зрозумів імена, що присвоєні стратегіям відображення шрифтів. Навіть у самій специфікації це зазначається. В наступних версіях пропонують використовувати імена, які якнайкраще ілюструють спосіб використання стратегії. Пропонуються такі альтернативи:
requires для block
important для swap
preferable для fallback
Значення optional, швидше за все, не буде змінюватися. Воно і так відмінно описує поведінку. З цим значенням шрифт вважається необов’язковим для фонового сторінки, що говорить браузеру: «якщо шрифт вже доступний, використовуй його. Якщо ні, не так важливо, використовуй фолбек шрифт. Шрифт може завантажитися до відвідування майбутніх сторінок».
З цим значенням таймлайн має короткий блоковий період (рекомендується 100ms) і нульовий період підміни. Таким чином, після блокового періоду відразу настає період відмови. Якщо шрифт не доступний, він не буде використовуватися на цій сторінці. Шрифт може запуститися у фоновому режимі, і буде негайно отрендерен при відвідуванні майбутніх сторінок.
Повинен відзначити, що на поганому з’єднанні браузер може припинити або навіть не почати завантаження шрифту. Це відбувається, щоб не впливати на якість мережевого підключення. Сайтом можна користуватися, однак шрифт не буде доступний відразу при відвідуванні наступних сторінок.
У відео нижче тестова сторінка завантажується без імітації поганого з’єднання. Шрифт завантажується швидко, але тільки після короткого блокового періоду. Тому текст відображається з фолбек шрифтом на весь час роботи зі сторінкою.
Your browser does not support the video tag.
У наступному відео сторінка перезавантажується з тими ж налаштуваннями мережі, але в цей раз включений кеш для імітації другого відвідування:
Your browser does not support the video tag.
І ось воно, тепер заголовок рендерится з очікуваним шрифтом. Перш ніж ми продовжимо, зауважте, що для блокового періоду зі значеннями fallback і optional рекомендується дуже невелика затримка 100ms. Це дозволяє швидко відображати швидко завантажений шрифт (шрифт або з кешу), перш ніж використовувати фолбек шрифт. Таким чином, уникається ефект «миготіння нестилизованного тексту» або МНТ.
Мені самому цікаво, чому при font-display: swap блоковий період стискається до 0, а не використовує той же короткий інтервал, як для optional. Виявляється, в GitHub репозиторії специфікації відкритий баг, де сказано, що swap повинен використовувати невелику затримку, як і інші значення.
Про фолбек шрифті
Вище я кілька разів згадав фолбек шрифт. Але звідки він береться? Фолбек шрифт – перший доступний для подання шрифт в стеку шрифтів, який задається за допомогою властивості font-family на елементі. Наприклад, на тестовій сторінці значення font-family для заголовка:
h1 {
font-family: ‘Saira Condensed’, Arial, “Helvetica Neue”, Helvetica, sans-serif;
}
Це можна перевірити (див. відео вище для optional), наприклад, на windows, яка використовує для фонового шрифту Arial.
Підтримка
На момент написання статті дескриптор font-display володіє наступною підтримкою:
Chrome 60+
Opera 47+
Для Firefox в розробці, з версії 46 доступний по прапору
Для Safari статус Webkit стверджує, що дескриптор в розробці
Про швидкої підтримки Microsoft Edge говорити не доводиться. На сайті Microsoft Edge Developer Feedback є ticket, де можна проголосувати на реалізацію цієї функції
Зверніться до caniuse.com для отримання останніх відомостей про підтримку.
Варто зазначити, що підтримку font-display не можна перевірити з допомогою функціональних запитів. Як було сказано вище, це не властивість CSS, а дескриптор. У ба на GitHub ви знайдете, як правильно виявити цю функцію.
Якщо ви визначили, що font-display не підтримується, можна застосувати кілька фолбек стратегій, але вони виходять за рамки цієї статті. У статті Zach Leatherman «повне керівництво по стратегіям завантаження шрифтів» представлений вичерпний опитування по доступним рішенням.
Використання з Google Fonts
Ви могли помітити, що в демо використовується шрифт з Google Fonts, але він завантажується по-іншому (посилання на стилі провайдера шрифту). Замість цього я просто скопіював URL шрифту із стилів і використав його в моєму кастомном правилі @font-face. Мені довелося зробити це, так як font-display повинен задаватися всередині правила font-face.
Чи є інший, більш Google Fonts-friendly спосіб? Будуть Google Fonts і інші сторонні хостинги підтримувати font-display?
У сховищі Google Fonts GitHub відкритий баг з цим обговоренням. Поставте +1, щоб показати свою зацікавленість!
Також варто сказати, що CSS Fonts Module Level 4 пропонує використовувати font-display як дескриптора для @font-feature-values, що дасть розробникам можливість встановлювати політику відображення правил @font-face, які безпосередньо не контролюються. Це ще не реалізовано ні в одному браузері.
Заключні слова
Сподіваюся, стаття дала вам повний огляд дескриптора font-display, а також переконала у світлому майбутньому фонового шрифтів у вебі.
У цій статті не обговорювалися спеціальні випадки використання для різних стратегій font-display, проте в специфікації ілюструються ці кейси з зрозумілими прикладами. По цій темі розбирається кілька цитованих посилань. Крім засад у цій статті ви можете пошукати інформацію в наданих мною посиланнях.
