От автора: в этом году на конференции по типографике 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 разработчиков не придется изучать новые свойства.
|
1 |
font-weight: 791; /* Промежуточное значение между 700 и 800. */ |
Помимо свойств выше, у любой известной вариации будет отдельное CSS свойство. На данный момент в этой группе всего одна ось: optical-sizing. С ростом популярности новых осей вариаций будут добавляться новые свойства.
Создатели шрифтов могут захотеть добавить малоизвестные оси вариаций. В такой ситуации разработчики должны иметь возможность задавать эти оси без добавления новых свойств. Поэтому свойство низшего уровня font-variation-settings позволяет разработчикам задавать имена осей в виде CSS значений, а также в виде ассоциированных с ними значений вариаций. Как и другие свойства, font-variation-settings поддерживает CSS анимации. Так как свойство является страховочным на тот случай, если не задано ни одного свойства более высокого уровня, использовать его нужно очень редко.
|
1 |
font-variation-settings: "XHGT" 0.7; |
Реализация
Наша сегодняшняя статья повествует о поддержке изменчивых шрифтов в OpenType, однако в TrueType вариации поддерживаются уже много лет. На самом деле, все операционные системы Apple сейчас включают системные API для TrueType вариаций шрифтов. По этой причине я начал разрабатывать свою реализацию поддержки изменчивых шрифтов в WebKit в шрифтах TrueType для данной платформы. На данный момент я реализовал только свойство низшего уровня font-variation-settings, но с нетерпеньем жду, когда смогу полностью закончить проект. Пожалуйста, посмотрите демо с существующей поддержкой в Safari Technology Preview только на macOS Sierra и расскажите о своих ощущениях!
Автор: Myles Maxfield
Источник: //webkit.org/
Редакция: Команда webformyself.
