Мінливі шрифти в інтернеті

34

Від автора: в цьому році на конференції по типографіці ATypI у Варшаві представники Adobe, Microsoft, Apple і Google представили приголомшливу розробку в області веб-шрифтів: підтримка мінливих шрифтів OpenType. Щоб зрозуміти, що це таке, краще показати приклад.

У прикладі видно, як змінюється насиченість шрифту San Francisco на iOS. Видно, як насиченість постійно що інтерполюється, що дозволяє змінювати відстані між літерами. Спробувати демо можна за посиланням з допомогою Safari Technology Preview тільки на macOS Sierra.

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

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

Изменчивые шрифты в вебе

Навіть якщо взяти лише дві осі насиченість і ширина), один шрифт можна використовувати в різних ситуаціях. Повторне використання одного файлу, але в різних варіаціях може радикально зменшити час завантаження сайту. Приклад можна подивитися за посиланням з допомогою технології Safari Technology Preview тільки на macOS Sierra.

CSS

W3C в даний час розробляє спосіб опису значень осей варіацій в CSS. Поточний чернетка ділить осі варіацій на три групи: вибірка шрифту, загальні та інші.

В CSS є чотири властивості, які впливають на шрифти в документі: font-weight, font-stretch, font-style і font-size. З підтримкою змінних шрифтів всі ці 4 властивості будуть приймати числові значення, які будуть впливати на вибір шрифту, а також будуть активуватися після вибору. Тобто якщо на сайті задати властивість font-weight: bold, то може активуватися варіація шрифту, після чого зміниться його насиченість. У всіх цих властивостях підтримується CSS-анімація, так як значення можна плавно інтерполювати. Ці властивості зіставляються з більшою частиною відомих варіацій, тобто більшості CSS розробників не доведеться вивчати нові властивості.

font-weight: 791; /* Проміжне значення між 700 і 800. */

Крім властивостей вище, у будь-якої відомої варіації буде окреме властивість CSS. На даний момент в цій групі всього одна вісь: optical-sizing. З зростанням популярності нових осей варіацій будуть додаватися нові властивості.

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

font-variation-settings: «XHGT» 0.7;

Реалізація

Наша сьогоднішня стаття оповідає про підтримку мінливих шрифтів OpenType, проте в TrueType варіації підтримуються вже багато років. Насправді, всі операційні системи Apple зараз включають системні API для TrueType варіацій шрифтів. З цієї причини я почав розробляти свою реалізацію підтримки мінливих шрифтів WebKit у шрифти TrueType для даної платформи. На даний момент я реалізував тільки властивість нижчого рівня font-variation-settings, але з нетерпінням чекаю, коли зможу повністю закінчити проект. Будь ласка, подивіться демо з існуючою підтримкою в Safari Technology Preview тільки на macOS Sierra і розкажіть про свої відчуття!