Детальний посібник з використання CSS @font-face для завантаження кастомних шрифтів, що містить техніки оптимізації для покращення продуктивності сайту та досвіду користувачів з усього світу.
CSS Font Face: Стратегії завантаження та оптимізації кастомних шрифтів для глобального веб-дизайну
Типографіка відіграє вирішальну роль у дизайні веб-сайтів, формуючи користувацький досвід та передаючи ідентичність вашого бренду. Правило @font-face у CSS дозволяє розробникам вбудовувати кастомні шрифти безпосередньо у свої веб-сайти, надаючи більший контроль над візуальним представленням тексту та створюючи більш унікальний та захоплюючий досвід для користувачів. Однак неправильне впровадження може призвести до проблем з продуктивністю, впливаючи на час завантаження сайту та негативно позначаючись на задоволеності користувачів, особливо в регіонах з повільнішим інтернет-з'єднанням.
Цей вичерпний посібник досліджує тонкощі @font-face, охоплюючи найкращі практики для завантаження кастомних шрифтів та стратегії оптимізації для забезпечення безперебійного та продуктивного досвіду для глобальної аудиторії. Ми заглибимося в різні формати шрифтів, техніки оптимізації та розширені функції, щоб допомогти вам оволодіти мистецтвом веб-типографіки.
Розуміння правила @font-face
Правило @font-face — це потужне правило CSS, яке дозволяє вам вказувати файли кастомних шрифтів для завантаження та використання на вашому веб-сайті. Воно, по суті, долає розрив між обмеженим набором системних шрифтів та величезним світом кастомної типографіки.
Ось базовий синтаксис:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Розглянемо компоненти:
font-family: Ця властивість визначає назву, яку ви будете використовувати для посилання на кастомний шрифт у ваших правилах CSS. Оберіть описову та унікальну назву.src: Ця властивість вказує на розташування файлів шрифтів. Ви можете надати кілька джерел, дозволяючи браузеру вибрати оптимальний формат на основі його можливостей. Функціяformat()вказує формат шрифту кожного файлу.font-weight: Ця властивість визначає насиченість (жирність) шрифту. Поширені значення включаютьnormal,bold,lighter,bolderта числові значення, такі як100,400,700тощо.font-style: Ця властивість визначає стиль шрифту (наприклад,normal,italic,oblique).
Після визначення ви можете використовувати кастомний шрифт у своїх правилах CSS так:
body {
font-family: 'MyCustomFont', sans-serif;
}
Це застосує 'MyCustomFont' до всього тіла вашого веб-сайту. sans-serif — це запасний шрифт, який буде використовуватися, якщо кастомний шрифт не зможе завантажитися.
Вибір правильних форматів шрифтів: глобальна перспектива
Різні браузери підтримують різні формати шрифтів. Щоб забезпечити широку сумісність, важливо надавати ваші шрифти в кількох форматах. Ось огляд поширених форматів шрифтів та їх підтримки браузерами:
- WOFF2 (Web Open Font Format 2): Найсучасніший і настійно рекомендований формат, що пропонує краще стиснення та продуктивність. Підтримується всіма сучасними браузерами.
- WOFF (Web Open Font Format): Широко підтримуваний формат, що пропонує хороше стиснення. Все ще актуальний для старих браузерів.
- EOT (Embedded Open Type): Спеціально розроблений для Internet Explorer. Зазвичай більше не потрібен, якщо вам не потрібно підтримувати дуже старі версії IE.
- TTF (TrueType Font) / OTF (OpenType Font): Старіші формати, які зазвичай мають більший розмір і менш оптимізовані для веб-використання. Уникайте їх прямого використання, коли це можливо.
- SVG Fonts: Старіший формат, який сьогодні рідко використовується через обмеження підтримки браузерами та інші недоліки.
Рекомендація: Використовуйте WOFF2 як основний формат, а WOFF надавайте як запасний варіант для старих браузерів. Розглядайте EOT лише якщо вам потрібно підтримувати дуже старі версії Internet Explorer.
Ось приклад надання кількох форматів шрифтів у вашому правилі @font-face:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.eot') format('embedded-opentype'); /* For older IE */
font-weight: normal;
font-style: normal;
}
Стратегії завантаження шрифтів: оптимізація для швидкості та користувацького досвіду
Спосіб завантаження шрифтів може значно вплинути на продуктивність вашого сайту. Ось кілька стратегій завантаження шрифтів, які ви можете застосувати:
1. Базове завантаження шрифтів (поведінка за замовчуванням)
За замовчуванням браузери зазвичай блокують рендеринг тексту доти, доки шрифт не завантажиться. Це може призвести до відчуття вузького місця в продуктивності, коли користувачі бачать порожній екран або невидимий текст протягом короткого періоду (часто називається "спалах невидимого тексту" або FOIT).
Хоча цей підхід простий у реалізації, він зазвичай не рекомендується для оптимального користувацького досвіду.
2. Використання властивості font-display
Властивість font-display пропонує більше контролю над тим, як шрифти завантажуються та відображаються. Вона дозволяє налаштовувати поведінку під час процесу завантаження шрифту, забезпечуючи більш плавний досвід для ваших користувачів. Це рекомендований підхід для більшості ситуацій.
Ось можливі значення для font-display:
auto: Браузер використовує свою стратегію завантаження шрифтів за замовчуванням (зазвичай FOIT).block: Дає шрифту короткий період блокування та нескінченний період заміни. Браузер спочатку приховує текст, а потім відображає його, коли шрифт завантажено. Якщо шрифт не завантажується протягом короткого періоду (зазвичай 3 секунди), відображається запасний шрифт.swap: Дає шрифту нульовий період блокування та нескінченний період заміни. Браузер негайно відображає текст, використовуючи запасний шрифт. Після завантаження кастомного шрифту текст замінюється на нього. Це дозволяє уникнути FOIT, але може призвести до "спалаху нестилізованого тексту" (FOUT).fallback: Дає шрифту дуже короткий період блокування та короткий період заміни. Це компроміс міжblockтаswap. Браузер приховує текст на дуже короткий час, а потім перемикається на запасний шрифт, якщо кастомний не завантажився. Він продовжує замінювати шрифти протягом короткого періоду, після чого зупиняється і просто використовує запасний шрифт.optional: Дає шрифту надзвичайно короткий період блокування і не дає періоду заміни. Корисно для шрифтів, які не є критичними для початкового рендерингу сторінки (наприклад, шрифти, що використовуються в неосновних елементах інтерфейсу).
Рекомендації:
- Для більшості сценаріїв
swapзабезпечує найкращий баланс між сприйманою продуктивністю та візуальною стабільністю. Користувачі одразу бачать текст, навіть якщо він спочатку стилізований запасним шрифтом. - Використовуйте
fallback, якщо ви хочете мінімізувати FOUT, але все ще надаєте пріоритет кастомному шрифту. - Використовуйте
optionalдля некритичних шрифтів, щоб запобігти непотрібному блокуванню рендерингу сторінки.
Приклад використання font-display: swap:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3. Попереднє завантаження шрифтів
Попереднє завантаження шрифтів може покращити продуктивність, вказуючи браузеру завантажити файли шрифтів якомога раніше. Це може зменшити затримку, пов'язану із завантаженням шрифтів, що призведе до швидшого сприйняття часу завантаження.
Використовуйте тег <link rel="preload"> у <head> вашого HTML-документа для попереднього завантаження шрифтів:
<link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
Пояснення:
rel="preload": Вказує, що ресурс слід попередньо завантажити.href: Вказує URL файлу шрифту.as="font": Вказує тип ресурсу, що попередньо завантажується (у даному випадку, шрифт).type="font/woff2": Вказує MIME-тип файлу шрифту.crossorigin: Потрібен, якщо шрифт завантажується з іншого джерела (наприклад, CDN).
Обережно: Попереднє завантаження занадто великої кількості ресурсів може негативно вплинути на продуктивність. Попередньо завантажуйте лише ті шрифти, які є критичними для початкового рендерингу сторінки.
4. Font Loading API (Розширений рівень)
Font Loading API забезпечує більш детальний рівень контролю над завантаженням шрифтів. Він дозволяє визначати, коли шрифт завантажився, відстежувати прогрес завантаження та обробляти помилки. Це може бути корисним для реалізації більш складних стратегій завантаження шрифтів.
Приклад (JavaScript):
document.fonts.load('1em MyCustomFont').then(function() {
// Font has loaded successfully
console.log('MyCustomFont loaded!');
});
Font Loading API складніший у використанні, ніж властивість font-display, але він пропонує більшу гнучкість для розширених випадків використання.
Оптимізація файлів шрифтів: зменшення розміру та покращення продуктивності
Оптимізація файлів шрифтів є вирішальною для покращення продуктивності веб-сайту та зменшення часу завантаження. Ось кілька технік, які ви можете використовувати:
1. Створення підмножин шрифтів (Subsetting)
Більшість шрифтів містять велику кількість гліфів (символів), багато з яких можуть не використовуватися на вашому веб-сайті. Створення підмножини шрифту полягає у видаленні невикористаних гліфів з файлу шрифту, що значно зменшує його розмір. Це особливо важливо при підтримці кількох мов, оскільки шрифти можуть містити гліфи для символів, які не використовуються в певному регіоні.
Переваги:
- Менший розмір файлу шрифту
- Швидший час завантаження
- Покращена продуктивність сайту
Інструменти для створення підмножин шрифтів:
- FontForge (Open Source): Потужний настільний редактор шрифтів, що дозволяє вручну створювати підмножини.
- Glyphhanger (Командний рядок): Інструмент командного рядка, який визначає невикористані гліфи та створює підмножини.
- Онлайн-інструменти для створення підмножин шрифтів: Існує кілька онлайн-інструментів для створення підмножин шрифтів, наприклад, Webfont Generator від Font Squirrel.
Unicode-range
Для багатомовних сайтів дескриптор CSS unicode-range можна використовувати для визначення, для яких діапазонів символів Unicode слід використовувати шрифт. Це дозволяє браузеру завантажувати лише необхідні частини шрифту, покращуючи продуктивність. Це особливо корисно при роботі з мовами, що мають великі набори символів, як-от китайська, японська та корейська (CJK).
Приклад:
@font-face {
font-family: 'NotoSansCJK';
src: url('NotoSansCJK-Regular.woff2') format('woff2');
unicode-range: U+4E00-9FFF, /* Common CJK Unified Ideographs */
U+3040-309F, /* Hiragana */
U+30A0-30FF; /* Katakana */
font-weight: normal;
font-style: normal;
}
2. Стиснення
Переконайтеся, що ваші файли шрифтів правильно стиснуті за допомогою Gzip або Brotli. Більшість веб-серверів підтримують ці алгоритми стиснення, які можуть значно зменшити розмір файлів шрифтів під час передачі.
Переваги:
- Менший розмір файлу під час передачі
- Швидший час завантаження
3. Оптимізація SVG-шрифтів
Якщо ви використовуєте SVG-шрифти (хоча це зазвичай не рекомендується), оптимізуйте SVG-файли за допомогою таких інструментів, як SVGO (SVG Optimizer), щоб видалити непотрібні метадані та зменшити розмір файлу.
4. Варіативні шрифти
Варіативні шрифти — це відносно нова технологія шрифтів, яка дозволяє одному файлу шрифту містити кілька варіацій гарнітури, таких як різна насиченість, ширина та стиль. Це може значно зменшити загальний розмір файлу порівняно з використанням окремих файлів шрифтів для кожної варіації.
Переваги:
- Менший розмір файлів порівняно з традиційними форматами при використанні кількох варіацій
- Більша гнучкість у дизайні
5. Кешування
Налаштуйте ваш веб-сервер на правильне кешування файлів шрифтів. Це дозволяє браузерам зберігати файли шрифтів локально, зменшуючи потребу повторно завантажувати їх при наступних відвідуваннях.
Переваги:
- Швидший час завантаження для повторних відвідувачів
- Зменшене навантаження на сервер
Аспекти доступності
При використанні кастомних шрифтів важливо враховувати доступність, щоб ваш веб-сайт був зручним для всіх, включаючи людей з обмеженими можливостями.
1. Достатній контраст
Переконайтеся, що колір тексту забезпечує достатній контраст відносно кольору фону, щоб відповідати стандартам WCAG (Web Content Accessibility Guidelines). Використовуйте інструменти для перевірки контрасту, щоб переконатися, що співвідношення контрастності є адекватним.
2. Читабельний розмір шрифту
Використовуйте достатньо великий розмір шрифту, щоб його було легко читати, особливо для користувачів з вадами зору. Уникайте використання надто малих розмірів шрифту.
3. Насиченість шрифту
Оберіть насиченість шрифту, яка легко читається. Уникайте використання надто тонких або світлих шрифтів, оскільки вони можуть бути важкими для читання для деяких користувачів.
4. Запасні шрифти
Надавайте відповідні запасні шрифти у ваших правилах CSS, щоб текст залишався читабельним, навіть якщо кастомний шрифт не завантажиться. Обирайте запасні шрифти, схожі за стилем та виглядом на кастомний шрифт.
5. Зміна розміру тексту
Переконайтеся, що користувачі можуть легко змінювати розмір тексту на вашому сайті за допомогою масштабування в браузері або інших інструментів доступності. Уникайте використання одиниць фіксованого розміру (наприклад, пікселів) для розмірів шрифтів. Замість цього використовуйте відносні одиниці (наприклад, em, rem).
6. Атрибути мови
Правильно встановіть атрибут lang на тезі <html>, щоб вказати мову сторінки. Це допомагає програмам зчитування з екрана та іншим допоміжним технологіям правильно відтворювати текст.
Приклад:
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<p>This is some text in English.</p>
</body>
</html>
Кросбраузерна сумісність
Переконайтеся, що ваші кастомні шрифти сумісні з широким спектром браузерів. Тестуйте свій веб-сайт на різних браузерах та пристроях, щоб виявити будь-які проблеми сумісності. Використовуйте такі інструменти, як BrowserStack або Sauce Labs, для тестування вашого сайту на різноманітних браузерах та операційних системах.
Розгляньте можливість використання таблиці стилів для скидання (наприклад, Normalize.css), щоб нормалізувати стандартні стилі в різних браузерах.
Поширені помилки, яких слід уникати
- Використання занадто великої кількості кастомних шрифтів: Використання занадто великої кількості кастомних шрифтів може негативно вплинути на продуктивність та створити перевантажений візуальний досвід. Обмежте кількість кастомних шрифтів, що використовуються на вашому сайті, до двох-трьох.
- Використання великих файлів шрифтів: Великі файли шрифтів можуть значно збільшити час завантаження. Оптимізуйте файли шрифтів, використовуючи описані вище методи.
- Ненадання запасних шрифтів: Ненадання запасних шрифтів може призвести до невидимого тексту, якщо кастомний шрифт не завантажиться.
- Ігнорування аспектів доступності: Ігнорування аспектів доступності може зробити ваш веб-сайт непридатним для використання людьми з обмеженими можливостями.
- Відсутність тестування на різних браузерах: Відсутність тестування на різних браузерах може призвести до проблем сумісності.
- Пряме посилання на файли шрифтів з сайту дизайнера або інших ненадійних джерел: Розміщуйте шрифти лише на власному веб-сайті, CDN або в надійному сервісі шрифтів.
Найкращі практики для глобальної веб-типографіки
При розробці веб-сайтів для глобальної аудиторії важливо враховувати наступні найкращі практики для веб-типографіки:
- Обирайте шрифти, які підтримують кілька мов: Вибирайте шрифти, що містять гліфи для мов, які ви плануєте підтримувати на своєму сайті.
- Використовуйте відповідні розміри шрифтів для різних мов: Розміри шрифтів, які підходять для однієї мови, можуть не підходити для іншої. За потреби коригуйте розміри шрифтів, щоб забезпечити читабельність для різних мов.
- Враховуйте висоту рядка та міжлітерний інтервал: Висота рядка та міжлітерний інтервал можуть впливати на читабельність, особливо для мов зі складними наборами символів. За потреби коригуйте ці значення для оптимізації читабельності.
- Використовуйте відповідне вирівнювання тексту: Відповідне вирівнювання тексту може відрізнятися залежно від мови. Наприклад, мови з напрямком письма зліва направо зазвичай використовують вирівнювання по лівому краю, тоді як мови з напрямком справа наліво — по правому.
- Тестуйте свій веб-сайт з різними мовами: Тестуйте свій веб-сайт з різними мовами, щоб переконатися, що типографіка виглядає правильно і легко читається.
Приклад: Використання шрифту з глобальною підтримкою символів
Розгляньте можливість використання шрифту, такого як Noto Sans, який розроблено для підтримки широкого спектру мов та систем письма. Google пропонує Noto Sans та його численні варіанти (Noto Sans CJK, Noto Sans Arabic тощо) як безкоштовний веб-шрифт.
Висновок
Оволодіння CSS @font-face та впровадження ефективних стратегій завантаження та оптимізації шрифтів є вирішальними для створення продуктивних та візуально привабливих веб-сайтів для глобальної аудиторії. Розуміючи нюанси форматів шрифтів, технік завантаження та методів оптимізації, ви можете забезпечити безперебійний та захоплюючий користувацький досвід, що виходить за межі географічних кордонів та культурних відмінностей.
Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете забезпечити, щоб типографіка вашого веб-сайту покращувала його загальний дизайн, підвищувала продуктивність та забезпечувала доступний досвід для всіх користувачів, незалежно від їхнього місцезнаходження чи пристрою.