От автора: вот уже несколько недель интернет будоражит тема цветных шрифтов. Adobe описывает эту технологию следующим образом: «OpenType-SVG – формат шрифта, в котором в OpenType шрифте все или часть символов представлены в SVG (масштабируемой векторной графике). Это позволяет отображать на одном символе несколько цветов и градиентов. Именно из-за этого свойства мы также называем OpenType-SVG шрифты цветными».
В марте Роел Нискенс писал о своем опыте создания цветного шрифта, он рассказал про проблему, которую они собирались решить: «Типографика в интернете может принимать только один цвет: символы или черные, или красные, и никогда красно-черные.»
Теперь же благодаря цветным шрифтам дизайнеры шрифтов могут использовать несколько цветов в одном символе. Веб-дизайнеры могут выбрать один из вариантов свойства font-variation-settings. Ниже я создал демо со шрифтом Trajan Color, новый шрифт от Adobe. Можно скачать на Typekit:
Посмотрите, как на разных частях символов ABC отображаются разные оттенки, видите?
Что это значит для дизайнеров. Для дизайнеров это значит, что в скором времени они смогут делать что-то очень интересное со смайликами, а также смогут менять типы отображения. Сейчас же поддержка в браузерах оставляет желать лучшего. Однако Adobe предупредили всех на странице Typekit, созданной Ником Шерманом:
«Поддержка в браузерах цветных шрифтов до сих пор развивается. Такие шрифты уже поддерживаются в Firefox и Microsoft Edge (IE). Ожидаем, что все больше разработчиков браузеров будут принимать данный формат. Если в браузере нет поддержки, шрифт будет откатываться на обычный монохромный.»
Думаю, что лучше всего фолбек к цветным шрифтам проиллюстрировал Роел Нискенс. Цветные шрифты должны быть чем-то идеальным, с техникой прогрессивного улучшения, как на картинке ниже:
Ниже я привел пару примеров цветных шрифтов, с которыми вы можете поэкспериментировать уже сейчас:
Но будьте осторожны! С данным методом есть пара проблем. Самая главная – размер файла шрифта в демо выше, 593Кб в сумме со всех файлов. Ну и если быть честным, в большинстве проектов нам, скорее всего, не понадобится загружать все вариации цветного шрифта, что сильно уменьшит размер файлов.
Во-вторых, в CSS нельзя менять цвета в таких шрифтах. Так что на какое-то время мы сильно зависим от того, какие цвета в шрифт заложат дизайнеры.
Несмотря на эти две проблемы, я рад появлению цветных шрифтов и тому, что они значат для типографики в вебе в целом. Я замечаю, как благодаря этому новому формату шрифтов возвращаются старые стили woodtype.
Посмотрите на демо ниже (в Firefox или Edge):
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.
