7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Web Typography

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

Read Time: 3 mins

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 стремятся сделать текст в браузере более интересным и увлекательным. Будущее веб-дизайн типографики выглядит светлым!

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


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Scroll to top
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.