Від автора: властивість CSS font-display визначає спосіб завантаження і відображення файлів шрифтів у браузері. Воно застосовується до правилом @font-face, з допомогою якого задаються кастомні шрифти.
Значення
@font-face {
font-family: ‘MyWebFont’; /* Задаємо ім’я кастомного шрифту */
src: url(‘myfont.woff2’) format(‘woff2’),
url(‘myfont.woff’) format(‘woff’); /* Задаємо посилання */
font-display: fallback; /* Задаємо поведінка браузера на час завантаження */
}
Властивість font-display приймає 5 значень:
auto (за уомлчанию). Браузер використовує стандартний метод завантаження, який часто схожий на значення block.
block. Браузер ховає текст до повного завантаження шрифту. Якщо точніше, то браузер розмальовує текст прозорим кольором, після чого замінює його на шрифт. Метод також відомий як «миготіння невидимого тексту» або МНТ.
swap. Браузер відображає фолбек шрифт до повного завантаження кастомного шрифту. Метод також відомий як «миготіння нестилизованного тексту».
fallback. Щось середнє між auto і swap. Браузер приховує текст приблизно на 100ms, і якщо шрифт не встиг завантажитися, відображається фолбек до тих пір, поки не завантажиться кастомный шрифт.
optional. Як і fallback, це значення змушує браузер ховати текст, після чого плавно переходити на фолбек до повного завантаження кастомного шрифту. Проте це значення дозволяє браузеру визначати, чи варто взагалі використовувати кастомный шрифт. Для цього заміряється швидкість з’єднання. На слабких з’єднаннях кастомный шрифт завантажуватися не буде.
Навіщо нам font-display
До широкої підтримки @font-face наш типографський арсенал був обмежений локальними шрифтами, і були доступні лише шрифти, завантажені на комп’ютер користувача. Такі шрифти називаються «безпечними», так як браузер не потрібно нічого завантажувати для їх візуалізації.
Потім прийшло правило @font-face і дало веб-дизайнерам і front-end розробникам силу, про яку вони й подумати не могли раніше. За допомогою цього правила ми могли завантажувати файли на сервер шрифтів, задавати імена шрифтів і вказувати посилання на них. Це правило дало поштовх сервісів типу Google Fonts, які проштовхнули кастомні шрифти в маси. Головна перешкода, що розділяє веб-дизайн від друкованого дизайну, було подолано.
Тим не менш, кастомні шрифти обходилися (і обходяться) дорого. Файли шрифтів можуть багато важити, що виливається в додатковий час завантаження файлів, зниження продуктивності, зокрема на пристроях з поганим з’єднанням. Ще більшу ціну платять користувачі з обмеженими тарифами на трафік.
Ще одна проблема, яка виникла при використанні користувальницьких шрифтів – «миготіння нестилизованного тексту». Раніше браузери за замовчуванням відображали системний шрифт, чекаючи завантаження кастомного. Веб-сторінки стали завантажуватися швидше, але веб-дизайнерів турбував той факт, що це відволікало користувачів і спотворювало дизайн. Зараз браузери приховують текст до тих пір, поки не завантажиться кастомный шрифт, і це явище отримало назву «миготіння невидимого тексту» або МНТ.
Обох ефектів варто уникати. Для зниження цих ефектів є методи оптимізації продуктивності шрифтів. Тепер же у нас є властивість font-display, за допомогою якого можна вказати бажаний спосіб завантаження.
