1. Design & Illustration
  2. Web Typography

Как использовать цветные шрифты в вебе

by
Read Time:7 minsLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

Каждый веб-дизайнер умеет задавать цвет шрифта, ведь так? Это одна из первых вещей, которые мы делаем, начиная изучать CSS. Мы выбираем цвет, затем используем стили, чтобы его применить, например color: blue; или color: purple;,таким образом все знаки в выбранном нами шрифте становятся этого цвета. И только этого цвета.

Но что, если вы хотите применить более одного цвета к знаку? Что, если вы сможете сделать ваши буквы синего и фиолетового цвета или задать градиент от синего к фиолетовому, либо же применить пять или более цветов к одной гарнитуре?

Что ж, с появлением цветных шрифтов Open Type, вы можете сделать именно это.

Взгляните на это изображение с четырьмя разными цветными шрифтами:

Это может выглядеть, как изображения, склеенные в Illustrator, но нет, вы смотрите на живые, редактируемые, читаемые поисковыми системами тексты в браузере.

Вместо того, что наследовать цвета, заданные CSS, эти шрифты обладают внутренними установками, которые позволяют им иметь несколько цветов на знак.

Используем цветные шрифты

Цветные шрифты — понятие довольно новое, так что пока что нет огромного их количества, а среди тех, что есть, существуют бесплатные и платные шрифты. Чтобы убедиться, что у вас тоже будет возможность поиграть с цветными шрифтами самостоятельно , я выбрал четыре бесплатных шрифта для нашего демо. Вы можете получить копии этих шрифтов в следующих местах:

В коде, которым мы добавляем их на страницу, нет ничего нового, это все тот же @font-face, который вы знаете и любите:

Браузеры и поддержка

На текущий момент, если вы хотите использовать цветные шрифты в браузере, вам понадобится либо Firefox, либо Edge, только они имеют полную поддержку цветных шрифтов. Safari ограничивает поддержку только SBIX форматом. Chrome имеет поддержку только на Android и только для формата CBDT. Opera вообще их не поддерживает.

Модификация CSS

На текущий момент мы не можем использовать CSS, чтобы изменить цвета внутри шрифта. Но дизайнер шрифта может выпустить шрифт с несколькими вариациями. И эти вариации можно менять через свойство font-feature-settings.

Мы можем увидеть эту функцию в действии в демо цветного шрифта Trajan от Робина Рэндла с TypeKit.

Цвета фиксированы, даже на ссылках

Так как цвета шрифта заданы внутри него, свойство color, которое вы обычно используете для вашего текста, не будет работать вообще, включая ссылки в любом состоянии.

Также не стоит забывать, что из-за того, что не будет смены цвета на ссылках, вы все еще сможете применить стандартное подчеркивание, а это подчеркивание получит любой цвет, который вы сможете задать через CSS. Если вы решите совместить цветные шрифты со ссылками, тогда стоит использовать эти подчеркивания, чтобы помочь понять пользователям отличить ссылки от обычного текста.

Вот небольшой пример кода:

Это даст нам красную линию, подчеркивающую последнее слово:

Заключение

Среди цветных шрифтов и переменных шрифтов, новейшие разработки в Open Type стремятся сделать текст в браузере более интересным и увлекательным. Будущее веб-дизайн типографики выглядит светлым!

Ссылки по теме


One subscription.
Unlimited Downloads.
Get unlimited downloads