Нещодавно в мене було бажання вивчити щось нове, і мій вибір пав на CSS Font Loading API. Чому саме він? Перш за все, він добре підтримується веб-браузерами, а це вже вагомий привід познайомитися з ним. А по-друге, він робить взаємодію з кастомними шрифтами легшою.
Перед тим, як показати що це таке, я хочу розповісти що ж не так з @font-face. Якщо ви не розумієте про що я, або просто хочете побачити швидкий огляд можливостей API, то ось CodePen для вас.
Що не так з @font-face
До появи CSS Font Loading API єдиним способом використання кастомних шрифтів було додавання @font-face та встановлення цього шрифта у властивості font-family якогось елементу.
Головною перевагою і недоліком такого способу є те, що завантаження шрифтів відбувається за потребою.
Дозвольте я вам розкажу: коли ви додаєте правило @font-face до вашого коду, в більшості браузерів (IE8 виключення) нічого не відбувається допоки ви не використаєте цей шрифт. Це добре, адже вони не завантажуються без потреби. А от незручність такого підходу в тому, що ми не можемо контролювати вигляд тексту між запитом завантаження шрифту та його відображення, за нас це роблять браузери, а їх поведінка може суттєво відрізнятися. Ось тут нам і потрібні CSS Font Loading.
Як це працює?
CSS Font Loading API дозволяє нам додавати шрифти, слідкувати за їх завантаженням та вибирати коли саме потрібно їх завантажувати. Якщо ви перед цим працювали з Font Face Observer, то опанувати цей API буде дуже просто.
Оголошення та додавання FontFace
Його оголошення дуже схоже на @font-face: перший аргумент - це родина шрифта, другий - джерело, звідки цей шрифт можна отримати, а третій (не обов'язковий) описує його стиль, товщину тощо.
var notoSansRegular = new FontFace('Noto Sans Regular', 'url(/fonts/NotoSans-Regular.woff2)', {
style: 'normal',
weight: '400'
});
Щоб використовувати наш шрифт, ви повинні додати його до FontFaceSet, доступного в document.fonts.
document.fonts.add(notoSansRegular);
Завантаження
Після оголошення і додання шрифту, ви можете завантажити його для використання на сторінці. Зробити це ви можете в будь-який момент виконання вашого коду.
notoSansRegular.load();
Відслідковування статусу
Додання та завантаження було легким, веселощі починаються при відслідкоуванні статусу завантаження шрифтів, бо саме тут ми можемо вирішити що, як і коли.
[FontFace].status повертає поточний статус шрифту (unloaded, loading, loaded чи error)
console.log(notoSansRegular.status);
Як тільки шрифт завантажиться і буде готовий до використання, спрацює проміс loaded:
notoSansRegular.loaded.then((fontFace) => {
// Тут ви можете оголосити нову font-family для елемента.
console.info('Current status', fontFace.status);
console.log(fontFace.family, 'loaded successfully.');
// Викликати помилку якщо не вдалося завантажити шрифт
}, (fontFace) => {
console.error('Current status', notoSansRegular.status);
});
Але так ми можемо дізнатися коли завантажився один конкретний шрифт, як же відслідкувати завантаження всіх шрифтів? FontFaceSet має атрибут ready, що мітить в собі проміс, який спрацює коли завантажаться всі шрифти на сторінці.
document.fonts.ready.then((fontFaceSet) => {
console.log(document.fonts.size, 'FontFaces loaded.');
});
Просто, чи не так? Після того як шрифти стануть готовими до використання, ви можете встановити їх в font-family потрібного елемента, або додати клас, що зробить це за вас. Все це я показав в цьому CodePen. Звісно, це не всі можливості, але зазвичай цього вистачає. Більше літератури я додам в кінці статті.
Підтримка браузерами
Звісно, для браузерів, що не підтримують цей API, потрібно теж якесь рішення, і зараз я не про Arial. Є куди кращі рішення.
Якщо ж цього вам недостатньо, спробуйте Font Face Observer.
Це круто, що ми отримали нативний спосіб управління шрифтами, але він ще не повністю підтримується, і це засмучує. А поки нам лишається чекати, використовувати поліфіли, і ще раз чекати (на властивість font-display)
Ще немає коментарів