Экспериментируем с цветными шрифтами

Экспериментируем с цветными шрифтами

От автора: вот уже несколько недель интернет будоражит тема цветных шрифтов. 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

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree