Патерни завантаження веб-шрифтів

1. Звичайне завантаження шрифтів
2. Завантаження груп шрифтів
3. Завантаження шрифтів з таймером
4. пріоритетна завантаження
5. Особливу відображення шрифтів
6. Оптимізація для кешування

Наша взаимовыгодная связь https://banwar.org/

Завантаження веб-шрифтів може здатися складним завданням. Однак, насправді, вона досить проста, якщо ви будете використовувати описані нижче патерни. Комбінуючи їх, ви зможете управляти завантаженням веб-шрифтів у всіх браузерах.

У цих патернах використовується Font Face Observer , Проста і невелика бібліотека завантаження веб-шрифтів. Font Face Observer вибирає найбільш ефективний спосіб завантаження шрифту, грунтуючись на його браузерної підтримки, так що ми можемо завантажувати шрифти, не турбуючись про кросбраузерності.

1. Звичайне завантаження шрифтів
2. Завантаження групи шрифтів
3. Завантаження шрифтів з таймером
4. пріоритетна завантаження
5. Особливу відображення шрифтів
6. Оптимізація для кешування

Неможливо порадити єдиний патерн, який ідеально підходив би кожному. Уважно вивчіть свій сайт, його аудиторію, і на підставі цього виберіть той спосіб завантаження або їх комбінацію, які підійдуть найкраще.

Звичайне завантаження шрифтів

Font Face Observer дає вам можливість контролювати завантаження веб-шрифтів через простий інтерфейс, заснований на Проміс. Не має значення, звідки будуть завантажуватися шрифти: ви можете розміщувати їх як у себе, так і підключати через сервіси - Google Fonts , Typekit , Fonts.com , і Webtype .

Щоб не перевантажувати патерни зайвим кодом, будемо вважати, що ви розміщуєте веб-шрифти у себе. Це означає, що в ваших CSS-файлах буде одне або кілька оголошень @ font-face, в яких зазначено, які шрифти потрібно завантажити через Font Face Observer. Для стислості ми не будемо оголошувати кожне з подібних правил в коді, але будемо вважати, що вони є.

@ Font-face {font-family: Output Sans; src: url (output-sans.woff2) format ( 'woff2'), url (output-sans.woff) format ( 'woff'); }

Розглянемо саму звичайну задачу: вам треба завантажити один або кілька різних шрифтів. Створіть кілька примірників FontFaceObserver, по одному на кожен шрифт, і викличте їх метод load.

var output = new FontFaceObserver ( 'Output Sans'); var input = new FontFaceObserver ( 'Input Mono'); output.load (). then (function () {console.log ( 'Завантажено Output Sans');}); input.load (). then (function () {console.log ( 'Завантажено Input Mono');});

Цей спосіб завантажить кожен шрифт незалежно від інших. Це корисно, коли шрифти не пов'язані один з одним, і ми очікуємо, що вони Отріс поступово (тобто як тільки буде завантажено, так і Отріс). На відміну від стандартного API завантаження шрифтів ви не передаєте URL шрифтів в Font Face Observer. Для завантаження шрифтів він використовує оголошення @ font-face, вже доступні в CSS. Це дозволяє завантажувати веб-шрифти вручну через JavaScript, передбачивши поступову деградацію до звичайного CSS.

Завантаження груп шрифтів

Ви можете завантажувати кілька шрифтів одночасно, групуючи їх: вся група або завантажиться повністю, або видасть помилку. Це корисно використовувати, коли завантажуються шрифти належать до одного сімейства, і ви не хочете, щоб група отрісовиваємих, поки не буде завантажено всі шрифти з неї. Тим самим, браузер не буде відображати стилі, поки шрифти представлені не повністю.

var normal = new FontFaceObserver ( 'Output Sans'); var italic = new FontFaceObserver ( 'Output Sans', {style: 'italic'}); Promise.all ([normal.load (), italic.load ()]). Then (function () {console.log ( 'Завантажено сімейство Output Sans');});

Ви можете згрупувати шрифти через Promise.all. Коли промис буде виконаний, ми будемо знати, що всі шрифти завантажені. Якщо промис відхилений - як мінімум один з шрифтів не зміг завантажитися.

Ще один приклад застосування угруповання шрифтів - зменшення кількості перекомпоновок сторінки. Якщо ви завантажуєте і промальовується веб-шрифти поступово, браузер буде виконувати перекомпонування сторінки безліч разів, так як характеристики накреслень запасного і веб-шрифту різні. Угруповання дозволить скоротити кількість перекомпоновок до однієї.

Завантаження шрифтів з таймером

Іноді шрифти завантажуються дуже довго. Це може стати проблемою, оскільки веб-шрифти відповідають за текст - головну частину контенту вашої сторінки. Неможливо чекати завантаження шрифтів нескінченно. Ми можемо виправити це, додавши таймер до завантаження.

Наступна допоміжна функція створює таймери, які повертають промис, відхиляється по спрацьовуванню таймера.

function timer (time) {return new Promise (function (resolve, reject) {setTimeout (reject, time);}); }

За допомогою Promise.race ми можемо змусити таймер і завантаження шрифту «змагатися» один з одним. Наприклад, якщо завантаження завершилася до того, як спрацював таймер, то шрифт переміг, промис виконаний. А якщо раніше спрацював таймер, промис відхилений.

var font = new FontFaceObserver ( 'Output Sans'); Promise.race ([timer (1000), font.load ()]). Then (function () {console.log ( 'Завантажено Output Sans');}). Catch (function () {console.log ( 'Час на завантаження Output Sans минув ');});

У цьому прикладі час завантаження шрифту обмежений однією секундою. Замість того, щоб працювати з одним шрифтом, ми також можемо призначити таймер цілу групу шрифтів. Це дозволить просто і ефективно обмежити час їх завантаження.

пріоритетна завантаження

Зазвичай, для того, щоб отрисовать першу половину екрану (above the fold - верхня половина першого екрану сайту, яку треба відобразити максимально швидко, прим. Перекладача), потрібно лише кілька шрифтів. Якщо завантажувати ці шрифти раніше інших, менш важливих, ми отримаємо виграш в продуктивності сайту. Це називається пріоритетним завантаженням.

var primary = new FontFaceObserver ( 'Primary'); var secondary = new FontFaceObserver ( 'Secondary'); primary.load (). then (function () {console.log ( 'Завантажено основний шрифт') secondary.load (). then (function () {console.log ( 'Завантажено другорядний шрифт')});});

При використанні пріоритетною завантаження другорядний шрифт залежить від основного: якщо не завантажиться основний шрифт, то чи не завантажиться і другорядний. Це може виявитися корисним.

Наприклад, можна застосувати пріоритетну завантаження так: спочатку завантажити невеликий основний шрифт, який містить обмежену кількість символів, а потім повний шрифт з великою кількістю символів або стилів. Так як основний шрифт малий, він набагато швидше завантажиться і Отріс. А якщо основний шрифт не зміг завантажитися, то, цілком можливо, не слід запитувати і другорядний - швидше за все, він теж не завантажиться.

Таке використання пріоритетною завантаження більш докладно описано в статтях Зака ​​Лезерман: Flash of Faux Text і Web Font Anti-Patterns: Data URIs .

Особливу відображення шрифтів

Перед тим як браузер зможе показати веб-шрифт, він повинен завантажити його по мережі. Зазвичай це займає якийсь час, і кожен браузер по-різному поводиться під час скачування веб-шрифтів: деякі з них приховують текст, а інші відразу ж показують його за допомогою запасного шрифту. Зазвичай це називають миготінням невидимого тексту (Flash Of Invisible Text, FOIT) і миготінням тексту без стилів (Flash Of Unstyled Text, FOUT).

FOUT і FOIT

Internet Explorer і Edge використовують FOUT і відображають запасні шрифти, поки веб-шрифт не закінчить свою завантаження. Всі інші браузери використовують FOIT і ховають текст під час завантаження веб-шрифтів.

Для управління цим поведінкою ввели нове CSS-властивість, зване font-display ( CSS Font Rendering Controls ). На жаль, воно досі перебуває в розробці і ще не підтримується жодним браузером (на даний момент вони сховані за прапором в Chrome і Opera). Однак ми можемо реалізувати аналогічну поведінку у всіх браузерах за допомогою Font Face Observer.

Ви можете обдурити браузери, які використовують FOIT, змусивши їх відразу ж малювати текст запасними шрифтами, використовуючи тільки повністю завантажені шрифти з вашої ланцюжка. Якщо шрифт ще не в ланцюжку (оскільки він завантажується), браузери не будуть намагатися приховати текст.

Найпростіший спосіб зробити це - встановлювати на елемент <html> по класу на кожне з трьох станів завантаження веб-шрифту: сам процес завантаження, його завершення і помилку. Клас fonts-loading встановлюється відразу, як починається завантаження, fonts-loaded - коли шрифт завантажений, і fonts-failed - якщо завантаження не вдалася.

var font = new FontFaceObserver ( 'Output Sans'); var html = document.documentElement; html.classList.add ( 'fonts-loading'); font.load (). then (function () {html.classList.remove ( 'fonts-loading'); html.classList.add ( 'fonts-loaded');}). catch (function () {html.classList .remove ( 'fonts-loading'); html.classList.add ( 'fonts-failed');});

За допомогою цих класів і простого CSS ви можете кросбраузерності використовувати FOUT. Почнемо з оголошення запасних шрифтів для всіх елементів, яким знадобляться веб-шрифти. Коли в <html> з'являється клас fonts-loaded, ми застосовуємо веб-шрифт, змінюючи ланцюжок шрифтів для всіх відповідних елементів. Зміна правила в CSS змусить браузер завантажити веб-шрифт, однак, оскільки до цього моменту він вже буде завантажений, перерисовка почнеться практично миттєво.

body {font-family: Verdana, sans-serif; } .Fonts-loaded body {font-family: Output Sans, Verdana, sans-serif; }

Такий спосіб завантаження шрифтів може здатися вам схожим на техніку прогресивного поліпшення. Так воно і є: мелькання тексту без стилів (FOUT) відповідає прогресивному поліпшенню. Базовий вид в першу чергу отрісовивается запасними шрифтами, а потім поліпшується веб-шрифтами.

Реалізація FOIT така ж проста. Коли веб-шрифти починають завантаження, ви приховуєте контент, який використовує шрифти, а коли вони завантажені, ви показуєте його знову. Не забувайте і про помилку завантаження - контент повинен бути доступний, навіть якщо шрифти не змогли завантажитися.

.fonts-loading body {visibility: hidden; } .Fonts-loaded body, .fonts-failed body {visibility: visible; }

Такий спосіб приховування контенту здається вам дивним? Добре якщо так. Цей патерн слід застосовувати тільки в дуже специфічних випадках. Наприклад, якщо у вас немає відповідного запасного шрифту, або ви точно знаєте, що шрифт був закешовану раніше.

Оптимізація для кешування

Всі попередні патерни дозволяли вам регулювати коли і як завантажуються шрифти. Однак, часто ми хочемо, щоб в залежності від наявності або відсутності шрифту в кеші сайт поводився по-різному. Наприклад, якщо шрифт закешовану, немає необхідності малювати текст спочатку запасним шрифтом. Такого ефекту можна домогтися збереженням в Session Storage статусу про те, чи був шрифт закешовану чи ні.

Коли шрифт завантажений, ми встановлюємо прапор в Session Storage. Прапор зберігається протягом всієї сесії, і з його допомогою ми можемо визначити, знаходиться файл в браузерному кеші чи ні.

var font = new FontFaceObserver ( 'Output Sans'); font.load (). then (function () {sessionStorage.fontsLoaded = true;}). catch (function () {sessionStorage.fontsLoaded = false;});

Тепер ви можете використовувати цю інформацію, щоб змінити стратегію завантаження закешовану шрифтів. Наприклад, можна включити такий фрагмент JavaScript в елемент <head> вашої сторінки, щоб відразу ж малювати веб-шрифти.

if (sessionStorage.fontsLoaded) {var html = document.documentElement; html.classList.add ( 'fonts-loaded'); }

Якщо ви будете завантажувати шрифти цим способом, ваші відвідувачі побачать FOUT тільки при першому відвідуванні сайту, а при всіх подальших переходах шрифт буде отрісовиваться миттєво. А значить, з одного боку, ви збережете вигоди, які дає прогресивне поліпшення, а з іншого - зробите сайт зручним, оскільки завантаження сторінок буде менше дратувати при повторних відвідинах.

Переклад оригінальної статті « Web Font Loading Patterns »Брема Штайна. Переклад Андрія Алексєєва , редактура Вадима Макєєва .

Теги: css , верстка , методика , типографіка