- анатомія шрифту
- формати шрифтів
- Зменшення розміру шрифту за допомогою стиснення
- Створення сімейства шрифтів за допомогою @ font-face
- вибір формату
- Субнастройкі діапазону Unicode
- Вибір і синтез шрифту
- Оптимізація завантаження і відтворення
- Веб-шрифти і процес візуалізації
- Оптимізації відтворення шрифту за допомогою Font Loading API
- Оптимізація відтворення шрифту с помощью вбудовування
- Повторне використання шрифту за допомогою HTTP-кешування
- Список методів оптимізації
Красивий і зручний шрифт - невід'ємна складова хорошого сайту. Завдяки йому нам доступний привабливий дизайн бренду, більш просте читання тексту і зручний інтерфейс. Але веб-шрифти дають нам додаткові можливості! Вони дозволяють вибрати, знайти і збільшити текст в будь-який момент. Крім того, написи не залежатимуть від дозволу екрану і залишаться чіткими на всіх пристроях.
Оптимізація шрифтів - це одне з найважливіших дій для поліпшення продуктивності сторінки. Кожен шрифт - це окремий ресурс, і деякі з них можуть блокувати отрисовку тексту. Однак сам факт того, що на сторінці є шрифти, не означає, що вона буде оброблятися повільніше. Навпаки, оптимізований шрифт в поєднанні з продуманою стратегією завантаження і застосування допоможе зменшити загальний розмір сторінки і прискорить її обробку.
анатомія шрифту
TL; DR
- Шрифти Unicode можуть містити тисячі гліфів.
- Існує чотири формату шрифтів: WOFF2, WOFF, EOT і TTF.
- Для деяких форматів шрифтів необхідно GZIP-стиснення.
Шрифт складається з гліфів - векторних форм кожної букви або символу. Тому розмір файлу шрифту залежить від двох змінних: кількості гліфів у шрифті і складності їх векторних контурів. Наприклад, Open Sans, один з найпопулярніших веб-шрифтів, містить 897 гліфів, включаючи латинські, грецькі і кириличні символи.
При виборі шрифту зверніть увагу на те, які символи в ньому підтримуються. Якщо вам потрібно перевести контент сторінки на різні мови, використовуйте шрифт, який виглядає однаково для всіх символів. наприклад, сімейство шрифтів Noto від Google розробляється, щоб підтримувати всі мови світу. Однак його повний архів важить більше 130 МБ!
Звичайно, доведеться попрацювати над встановленням відповідних налаштувань, щоб шрифт не погіршив роботу ресурсу. Однак на веб-платформах ви знайдете всі необхідні інструменти. Далі ми докладно розглянемо, як поєднати красиве оформлення і високу продуктивність.
формати шрифтів
Сьогодні в Інтернеті використовуються чотири формату контейнерів шрифтів: EOT , TTF , WOFF і WOFF2 . На жаль, незважаючи на можливість вибору, не існує єдиного формату, який працює у всіх браузерах. Наприклад, EOT доступний тільки в IE , TTF підтримується в цьому браузері тільки частково . WOFF поширений найширше, однак його не можна використовувати в деяких старих браузерах , А над підтримкою WOFF 2.0 працюють в даний час .
Отже, єдиного формату для всіх браузерів не існує, тому ми повинні використовувати кілька форматів, щоб сторінка виглядала однаково у всіх користувачів:
- Використовуйте WOFF 2.0 в тих браузерах, які його підтримують.
- Додайте WOFF для більшості браузерів.
- Застосовуйте TTF в застарілих браузерах Android (для версій до 4.4).
- Додайте EOT для підтримки застарілих версій IE (до IE9). ^
Зменшення розміру шрифту за допомогою стиснення
Шрифт - це набір гліфів, кожен з яких складається з контурів букв. Звичайно, все гліфи різні, але, тим не менш, вони містять багато схожою інформації, яку можна стиснути за допомогою GZIP або іншого сумісного компресора.
- Формати EOT і TTF не стискуються за замовчуванням. Переконайтеся, що на ваших серверах налаштоване стиснення GZIP при передачі ресурсів в цих форматах.
- До формату WOFF застосовується вбудоване стиснення. Переконайтеся, що компресор використовує оптимальний варіант відповідних налаштувань.
- WOFF2 використовує для користувача алгоритми попередньої обробки і стиснення для зменшення розміру файлу на 30% в порівнянні з іншими форматами. ознайомтеся зі звітом .
Варто відзначити, що деякі формати шрифтів містять додаткові метадані, наприклад інформацію про хінтінг і кернінг . Вони не потрібні не для всіх платформ, тому ми можемо стиснути файл ще більше. Дізнайтеся про відповідні функції вашого компресора шрифтів і переконайтеся, що у вас є відповідні ПО для тестування ресурсів і надання їх браузерам. Наприклад, Google Fonts підтримує більше 30 оптимізованих варіантів кожного шрифту і автоматично визначає і застосовує оптимальний варіант для кожної платформи і браузера.
Створення сімейства шрифтів за допомогою @ font-face
TL; DR
- Використовуйте підказку format (), щоб вказати формати шрифтів.
- Щоб прискорити роботу сайту, розділяйте великі Unicode-шрифти на піднабори. Використовуйте субнастройкі Unicode-діапазону і вручну додайте запасний варіант для більш старих браузерів.
- Щоб прискорити роботу сайту і отрисовку сторінок, скоротіть кількість варіантів стилю для кожного шрифту.
За допомогою CSS-правила @ font-face можна визначити розташування певного шрифту, його властивості стилю і кодові точки Unicode, для яких він повинен використовуватися. Використовуйте поєднання таких оголошень @ font-face для створення сімейства шрифтів. Браузер буде використовувати його, що зрозуміти, які шрифти потрібно завантажити і застосувати для поточної сторінки. Розглянемо докладніше, як це працює.
вибір формату
У кожному оголошенні @ font-face вказано назву сімейства шрифтів, які діє як логічна група з декількох оголошень, характеристик шрифту , Наприклад стилю, товщини і інтервалу, і дескриптора src , Який визначає список розташувань шрифту в порядку важливості.
@ Font-face {font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local ( 'Awesome Font'), url ( '/ fonts / awesome.woff2') format ( 'woff2'), url ( '/ fonts / awesome.woff') format ( 'woff'), url ( '/ fonts / awesome.ttf ') format (' ttf '), url (' / fonts / awesome.eot ') format (' eot '); } @ Font-face {font-family: 'Awesome Font'; font-style: italic; font-weight: 400; src: local ( 'Awesome Font Italic'), url ( '/ fonts / awesome-i.woff2') format ( 'woff2'), url ( '/ fonts / awesome-i.woff') format ( 'woff') , url ( '/ fonts / awesome-i.ttf') format ( 'ttf'), url ( '/ fonts / awesome-i.eot') format ( 'eot'); }Зверніть увагу, що приклади вище визначають два стилю (звичайний і курсив) одного сімейства шрифтів Awesome Font, кожен з яких вказує на різний набір ресурсів. У свою чергу, кожен дескриптор src містить розділений комами список варіантів ресурсу в порядку важливості:
- Директива local () дозволяє посилатися на шрифт і завантажувати його, а також використовувати шрифти, встановлені на пристрої користувача.
- За допомогою директиви url () можна завантажувати зовнішні шрифти. Вона може містити підказку format (), що вказує формат шрифту за посиланням.
^ Note: На пристрої користувача, особливо мобільному, рідко встановлено будь-яких шрифти, крім системних. Оскільки додати шрифт на телефон або планшет практично неможливо, ви завжди повинні надавати список зовнішніх розташувань ресурсу.
Коли браузер визначає, що для відображення сайту потрібен якийсь шрифт, він читає наданих список ресурсів в зазначеному порядку і намагається завантажити потрібний шрифт. Наприклад, використовуючи наступний приклад:
- Браузер читає розмітку сторінки і визначає, які варіанти шрифтів потрібні для відтворення тексту.
- Браузер перевіряє, чи не встановлені потрібні шрифти на пристрої.
- Якщо файлу немає на пристрої, браузер читає список зовнішніх розташувань:
- Якщо формат вказано, перед скачування браузер перевіряється, чи підтримується він. У разі негативної відповіді програма переходить до наступного варіанта.
- Якщо вказівка на формат відсутня, браузер завантажує ресурс.
За допомогою поєднання локальних і зовнішніх директив і підказки ми можемо вказати всі доступні формати шрифту. Після цього браузер зробить все інше: визначить потрібні ресурси і вибере відповідний формат.
Субнастройкі діапазону Unicode
Крім таких характеристик шрифтів, як стиль, товщина і інтервал, правило @ font-face дозволяє встановити набір кодових точок Unicode, підтримуваних ресурсом. Завдяки цьому ми можемо розділити великий Unicode-шрифт на кілька невеликих піднаборів (наприклад, латиницю, кирилицю і грецький алфавіт) і завантажувати тільки ті гліфи, які потрібні для відтворення тексту на конкретній сторінці.
За допомогою дескриптора діапазону Unicode ми можемо створити розділений комами список значень діапазону. Кожне з них може бути вказано в одній з трьох форм: of three different forms:
- Одна кодова точка (наприклад, U + 416)
- Діапазон інтервалу (наприклад, U + 400-4ff). Позначає начанльную і кінцеву кодові точки діапазону.
- Діапазон Wildcard (наприклад, U + 4 ??): '?' Символи позначають будь-шестандцатірічное число.
Наприклад, ми можемо розділити сімейство Awesome Font на латинський і японський піднабори, які браузер при необхідності може завантажити:
@ Font-face {font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local ( 'Awesome Font'), url ( '/ fonts / awesome-l.woff2') format ( 'woff2'), url ( '/ fonts / awesome-l.woff') format ( 'woff'), url ( '/ fonts / awesome-l.ttf') format ( 'ttf'), url ( '/ fonts / awesome-l.eot') format ( 'eot'); unicode-range: U + 000-5FF; / * Latin glyphs * /} @ font-face {font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local ( 'Awesome Font'), url ( '/ fonts / awesome-jp.woff2') format ( 'woff2'), url ( '/ fonts / awesome-jp.woff') format ( 'woff'), url ( '/ fonts / awesome-jp.ttf') format ( 'ttf'), url ( '/ fonts / awesome-jp.eot') format ( 'eot'); unicode-range: U + 3000-9FFF, U + ff ??; / * Japanese glyphs * /}За допомогою піднаборів діапазону Unicode і окремих файлів для кожного варіанту стилю ми можемо вказати складне сімейство шрифтів, яке швидко завантажується і менше важить. Користувач буде завантажувати тільки ті варіанти і піднабори, які він побачить на сторінці, і нічого більше.
Однак у цього методу є маленький недолік: не всі браузери поки підтримують діапазон Unicode. Одні просто ігнорують відповідну підказку і скачують всі варіанти, а інші можуть взагалі не обробляти оголошення @ font-face. Щоб вирішити цю проблему, ми повинні вручну встановити субнастройкі в старіших браузерах.
Оскільки застарілі браузери не можуть вибрати тільки потрібний поднабор і створити складний шрифт, нам треба про всяк випадок додасть один ресурс, який містить необхідні піднабори, і приховати інше від браузера. Наприклад, якщо на сторінці використовуються тільки символи латиниці, ми можемо видалити інші гліфи і відправляти це поднабор як окремий ресурс.
- Як визначити потрібні піднабори?
- Якщо субнастройкі діапазону Unicode підтримуються браузером, він автоматично вибере необхідний поднабор. Вам потрібно тільки додати відповідні файли на сторінку і вказати необхідні діапазони в правилах @ font-face.
- Якщо діапазон Unicode недоступний, слід приховати всі непотрібні піднабори, тобто вказати відповідний.
- Як створити поднабор шрифту?
- Для оптимізації шрифтів і створення піднаборів використовуйте інструмент pyftsubset з відкритим кодом.
- Деякі сервіси шрифтів дозволяють вручну встановити потрібні субнастройкі за допомогою параметрів запиту. Ви самі зможете вибрати необхідний поднабор для вашої сторінки. Щоб отримати більш детальну інформацію, ознайомтеся з документацією вашого постачальника шрифтів.
Вибір і синтез шрифту
Сімейство шрифтів складається з декількох варіантів стилю (звичайний, напівжирний, курсив) і варіантів жирності для кожного з них. Гліфи в цих варіантах можуть значно відрізнятися, наприклад інтервалом, розміром або навіть формою.
Наприклад, на зображенні вище показано сімейство шрифтів з трьома варіантами жирності для напівжирного стилю: 400 (стандартний), 700 (напівжирний) і 900 (жирний). Проміжні варіанти, виділені сірим, відображаються у вигляді найближчого з вказаних значень.
Вибір варіанту курсиву відбувається точно так само. Дизайнер шрифту створює різні версії, а ми вибираємо, які з них ми будемо використовувати. Не вказуйте занадто багато варіантів, оскільки кожен з них вимагає окремого скачування. Наприклад, ми можемо визначити два напівжирних способу накреслення для сімейства шрифтів Awesome Font:
@ Font-face {font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local ( 'Awesome Font'), url ( '/ fonts / awesome-l.woff2') format ( 'woff2'), url ( '/ fonts / awesome-l.woff') format ( 'woff'), url ( '/ fonts / awesome-l.ttf') format ( 'ttf'), url ( '/ fonts / awesome-l.eot') format ( 'eot'); unicode-range: U + 000-5FF; / * Latin glyphs * /} @ font-face {font-family: 'Awesome Font'; font-style: normal; font-weight: 700; src: local ( 'Awesome Font'), url ( '/ fonts / awesome-l-700.woff2') format ( 'woff2'), url ( '/ fonts / awesome-l-700.woff') format ( ' woff '), url (' / fonts / awesome-l-700.ttf ') format (' ttf '), url (' / fonts / awesome-l-700.eot ') format (' eot '); unicode-range: U + 000-5FF; / * Latin glyphs * /}В наведеному вище прикладі вказано сімейство шрифтів Awesome Font, що складається з двох ресурсів. Вони містять однаковий набір гліфів для латиниці (U + 000-5FF), але в різних варіантах жирності: стандартному (400) і напівжирному (700). Що станеться, якщо в CSS-правило буде вказано інше значення жирність або стиль курсив?
- Якщо точний збіг шрифту відсутня, браузер вибере найближчий доступний варіант.
- Якщо на знайдений версія стилю (наприклад, в прикладі вище ми не вказали версію для варіанту для курсиву), браузер сам синтезує накреслення.
В наведеному вище прикладі ми бачимо різницю між фактичними і синтезованими варіантами для Open-Sans. Всі синтезовані варіанти створені на основі одного шрифту зі стандартною жирністю (400). Як ви бачите, вони сильно відрізняються. Оскільки інформація для створення напівжирної версії і курсиву не вказана, накреслення символів буде залежати від браузера і використовуваного шрифту.
Оптимізація завантаження і відтворення
TL; DR
- Запити шрифтів відправляються тільки після створення моделі візуалізації, тому відображення тексту може бути затримано.
- Font Loading API дозволяє змінити повернутися до початкового значення відкладеної завантаження і використовувати власні стратегії завантаження і відображення шрифтів.
- За допомогою вбудовування шрифтом можна змінити повернутися до початкового значення відкладеної завантаження в старіших браузерах.
Повний веб-шрифт з усіма гліфами і варіантами стилю, які можуть нам не знадобитися, може важити кілька мегабайт. Щоб уникнути цієї проблеми, CSS-правило @ font-face дозволяє розділити сімейство шрифтів на набір ресурсів: піднабори Unicode, окремі варіанти стилю і т. Д.
За допомогою оголошень браузер визначає необхідні піднабори і варіанти і завантажує лише потрібні дані. Це дуже зручно, але якщо ми не будемо досить уважні, може статися помилка процесу відтворення. Це сповільнить відображення тексту і погіршить роботу сайту, чого ми не можемо допустити.
Веб-шрифти і процес візуалізації
У відкладеної завантаження шрифтів є приховане властивість, яке може уповільнити отрисовку тексту. Перш ніж визначити, як шрифти потрібні для показу сторінки, браузер повинен створити модель візуалізації , Яка залежить від моделей DOM і CSSOM. Таким чином, запити для шрифтів будуть відправлені пізніше, ніж для інших першочергових ресурсів. Можливо, браузер не покаже текст до того, як будуть завантажені інші ресурси.
- Браузер запитує HTML-документ.
- Браузер аналізує HTML-відповідь і створює модель DOM.
- Браузер виявляє ресурси CSS, JavaScript і т. Д. І відправляє запити.
- Після отримання CSS-контенту браузер створює модель CSSOM і поєднує її з моделлю DOM для отримання моделі візуалізації.
- Після того як модель візуалізації визначила необхідні варіанти шрифтів, відправляються відповідні запити.
- Браузер відображає макет сторінки і ресурси на ньому.
- Якщо шрифт ще не доступний, браузер може не показувати текст.
- Як тільки шрифт стає доступний, браузер відображає текст.
Між початком показу контенту на сторінці, яке відбувається незабаром після створення моделі візуалізації, і запитом до шрифту йде "гонка". Через це може виникнути проблема відсутності тексту. У різних браузерів цей процес може відрізнятися:
- Safari відображає текст тільки після того, як шрифт викачаний.
- Chrome і Firefox затримують отрисовку шрифту до 3 секунд, після чого використовують запасний варіант. Після скачування ресурсу браузери застосовують його для повторної візуалізації тексту.
- IE відразу показує текст за допомогою запасного шрифту, а потім заново відображає сторінку після скачування ресурсу.
У кожної стратегії візуалізації є свої переваги і недоліки. Одних повторна отрисовка дратує, а інші хочуть відразу бачити текст і не заперечують, якщо потім його вид зміниться. Суть в тому, що відкладена завантаження зменшує кількість скачуваних байтів, але може збільшити швидкість відображення тексту. Тепер розглянемо, як поліпшити це процес.
Оптимізації відтворення шрифту за допомогою Font Loading API
За допомогою інтерфейсу сценаріїв Font Loading API можна визначити CSS-накреслення веб-шрифту, керувати ним, відслідковувати процес скачування і міняти повернутися до початкового значення відкладеної завантаження. Наприклад, якщо ми впевнені, що буде потрібно якийсь варіант шрифту, ми можемо вказати це і налаштувати в браузері негайне скачування цього ресурсу.
var font = new FontFace ( "Awesome Font", "url (/fonts/awesome.woff2)", {style: 'normal', unicodeRange: 'U + 000-5FF', weight: '400'}); font.load (); // do not wait for render tree, initiate immediate fetch! font.ready (). then (function () {// apply the font (which may rerender text and cause a page reflow) // once the font has finished downloading document.fonts.add (font); document.body.style .fontFamily = "Awesome Font, serif"; // OR ... by default content is hidden, and rendered once font is available var content = document.getElementById ( "content"); content.style.visibility = "visible"; // OR ... apply own render strategy here ...});Ми можемо перевірити статус шрифту за допомогою директиви check () ) І відстежити процес його скачування. Це дозволяє задати власні правила відтворення тексту на сторінці:
- показувати текст лише після того, як шрифт став доступний;
- вибирати затримку відображення для кожного шрифту;
- використовувати запасний шрифт для відтворення тексту, а потім застосовувати скачаний ресурс.
Крім того, можна поєднувати зазначені вище стратегії для різного контенту на сторінці: затримувати відображення тексту на певний час або поки шрифт не стане доступним, використовувати запасних ресурси а потім заново малювати сторінку і т. Д.
Оптимізація відтворення шрифту с помощью вбудовування
Щоб вирішити проблему відсутності тексту, можна використовувати інший метод - вбудувати шрифти в таблицю стилів CSS.
- Браузер в першу чергу завантажує таблиці стилів CSS з співпадаючими медіа-запитами, тому що ці ресурси потрібні для створення моделі CSSOM.
- Якщо вмонтує дані шрифту в таблицю стилів CSS, браузер завантажить його в першу чергу, не чекаючи створення моделі візуалізації. Так ми можемо вручну змінити повернутися до початкового значення відкладеної завантаження.
Ця техніка не дуже гнучка і не дозволяє встановлювати час затримки або стратегії візуалізації для різного контенту. Однак це просте і надійне рішення, яке працює у всіх браузерах. Щоб досягти кращого результату, помістіть все вбудовані шрифти в окрему таблицю стилю і встановіть для них максимальне значення max-age. Завдяки цьому навіть якщо ви відновите CSS, користувачам не доведеться заново завантажувати шрифти.
Повторне використання шрифту за допомогою HTTP-кешування
Зазвичай шрифти - це статичні ресурси, які рідко оновлюються. Переконайтеся, що ви вказали відповідний заголовок ETag и оптимальні правила Cache-Control для всіх шрифтів.
Чи не зберігайте шрифти в локальному сховищі localStorage або за допомогою інших способів - це може привести до погіршення продуктивності. Використовуйте HTTP-кеш браузера в поєднанні з Font Loading API або бібліотекою webfontloader. Завдяки їм ви можете бути впевнені в правильній і надійну доставку шрифтів.
Список методів оптимізації
Незважаючи на поширену думку, веб-шрифти не уповільнюють отрисовку сторінки і не погіршують продуктивність. Використання оптимізованих шрифтів може значно поліпшити роботу користувачів з додатком або сайтом. Завдяки ним вам доступно оформлення бренду, більш просте читання тексту, зручний інтерфейс і пошук. Правильно налаштовані шрифти мають вигляд в будь-якому дозволі на екрані всіх форматів. Не бійтеся використовувати шрифти!
Однак бездумне додавання шрифтів може привести до скачування великої кількості ресурсів і затримок в роботі сайту. Саме тому нам необхідно використовувати інструменти оптимізації і допомогти браузеру зменшити розмір цих ресурсів, а також і правильно застосувати і разместетіть їх.
- Перевіряйте використання шрифтів. Не додавайте занадто багато шрифтів і для кожного з них скорочуйте число доступних варіантів. Тоді дизайн буде виглядати однорідно, а сайт - швидко реагувати на запити користувача.
- Розділіть шрифти на піднабори. Ви можете розділити ресурс на Unicode-діапазони, щоб відправляти тільки гліфи, потрібні на певній сторінку. Це зменшує розмір файлу і прискорює його скачування. Однак при створенні піднаборів не забудьте оптимізувати повторне використання шрифтів, щоб не завантажувати одні і ті ж символи для різних сторінок. Ми радимо використовувати піднабори, засновані на видах писемності, наприклад латиниці, кирилиці і т. Д.
- Використовуйте оптимізовані формати шрифтів для кожного браузера: WOFF2, WOFF, EOT і TTF. Переконайтеся, що до форматів EOT і TTF застосовано стиснення GZIP, так як вони не стискаються за замовчуванням.
- Вкажіть правила для кеша і перевірки актуальності. Шрифти - це статичні ресурси, які рідко оновлюються. Переконайтеся, що сервер відправляє маркер підтвердження і директиву max-age з максимально довгим періодом. Завдяки цьому шрифт може використовуватися повторно на різних сторінках.
- Використовуйте Font Loading API для оптимізації процесу візуалізації. Через відкладеної завантаження отрисовка шрифтів може бути затримана. За допомогою Font Loading API можна вирішити цю проблему для деяких шрифтів і вказати власні правила відображення і затримки для контенту на сторінці. Для більш старих браузерів, які не підтримують Font Loading API використовуйте JavaScript-бібліотеки webfontloader або CSS-вбудовування.
Як визначити потрібні піднабори?
Як створити поднабор шрифту?
Що станеться, якщо в CSS-правило буде вказано інше значення жирність або стиль курсив?
