Сегодня рассказываем о палитрах CSS в работе с многоцветными шрифтами COLRv1, которые поддерживаются в последних Chrome и Edge, и, конечно, показываем их возможности к старту курса по Frontend-разработке.
Тоши Омагари, автор Arcade Game Typography, пишет, что первый многоцветный цифровой шрифт создали в 1982 году для так и не вышедшей игры под названием Insector. Разноцветные шрифты (иногда их называют составными шрифтами) по-прежнему встречаются в сети довольно редко, даже несмотря на то, что с 2018 года формат шрифта COLR получил полную кросс-браузерную поддержку, даже в Internet Explorer!
Технология открывает совершенно новое направление в творческих возможностях типографики. И, пока некоторые из увиденных мною шрифтов были, мягко говоря, вульгарными, хроматические шрифты выглядят забавно, современно и цепляют внимание. С добавлением новых функций CSS для управления цветовой палитрой в цветных шрифтах (включая свойство font-palette и правило @font-palette-values) и развитием формата шрифта COLR пришло время поэкспериментировать с тем, на что способна современная типографика в вебе.
Поддержка COLR
Последний раз я писал о цветных шрифтах в 2018 году. На тот момент существовало 4 разных стандарта разноцветных начертаний: OpenType-SVG, COLR, SBIX и CBDT/CBLC. С помощью ChromaCheck можно проверить, какие форматы цветных шрифтов поддерживает ваш браузер.
Google Chrome отметил OpenType-SVG как WONTFIX. Это означает, что данный формат никогда не будет поддерживаться Chrome или Edge. SBIX и CBDT/CBLC чаще всего лучше не использовать в вебе, поскольку они основаны на растровых изображениях и при более крупных размерах шрифта размываются. Кроме того, эти стандарты — неудачный выбором для веба также из-за большого размера файла растровых шрифтов.
Ульрике Рауш создала LiebeHeide – растровый шрифт, который крайне правдоподобно воспроизводит письмо шариковой ручкой. «Моей самой главной целью всегда было предельно реалистично воспроизвести рукописный текст», — сказала она мне. — В LiebeHeide мне наконец-то удалось повторить эти рукописные атрибуты в шрифте. Минусы? Все PNG-изображения собираются в файле шрифта, и в итоге файл OTF приобретают огромный размер. Для настольных приложений по типу Adobe InDesign это, может, и не проблема, но для применения в вебе такой шрифт вряд ли подходит».
Все браузеры поддерживают шрифты COLR (сейчас их чаще называют COLRv0). В 98-й версии Chrome (и Edge), которая вышла в феврале, добавили поддержку COLRv1 — развитие формата.
Эти данные о поддержке браузером взяты на Caniuse, где можно найти больше информации. Число означает версию, с которой браузер поддерживает эту функцию.
Настольные компьютеры | ||||
Chrome | Firefox | IE | Edge | Safari |
71 | 32 | 9 | 12 | 11 |
Мобильные устройства / Планшеты | |||
Android Chrome | Android Firefox | Android | iOS Safari |
101 | 100 | 101 | 11.0-11.2 |
COLRv0 и COLRv1
COLRv1 — это часть стандарта OpenType 1.9. Несмотря на то, что в исходном COLRv0 не было многих креативных возможностей OpenType-SVG, в COLRv1 они есть, причём без определённых недостатков. Например, в COLRv0 получался только сплошной тон, тогда как в COLRv1 можно делать линейные, радиальные и конические градиенты. Кроме того, в данном формате доступны смешивание и наложение, а также повторное использование формы для сохранения размера файла.
Эксперт по типографике Роэл Нискинс объясняет: «Когда-то я считал OpenType-SVG лучшим форматом, ведь он предлагал наибольшую универсальность. Но затем пришёл к выводу, что он слишком сложен для низкоуровневой работы. Например, для рендеринга текста. В нём реализуется базовое подмножество SVG на уровне рендеринга шрифтов. Но OpenType-SVG плохо работает с другими технологиями шрифтов (хинтинг, оси вариативных шрифтов и т. д.), и его сложно реализовать. Так что я перешёл на COLR. По сути, COLR использует всё, что уже есть в шрифтах OpenType. Единственное «дополнение» — разделение на слои и возможность изменить цвет каждого слоя. Просто, но эффективно».
COLRv1 полностью совместим с осями вариативных шрифтов, и уже есть примеры вариативных шрифтов COLR: Merit Badge, Plakato Color и Rocher Color.
Ниже приведён яркий пример от Ульрике Рауш, демонстрирующий возможности формата. Это гарнитура пока что не вышедшего шрифта, которая имитирует неоновую вывеску:
Аким Хелмлинг из шрифтолитейной фабрики Underware в восторге от COLRv1. Он рассказал мне, что «в принципе, формат COLRv1 может оказать такое же (если не большее) влияние на дизайн шрифтов, как и вариативные шрифты за последние годы». Для Акима это однозначно лучший формат. «Все прежние цветовые форматы были неудачными попытками добавить цвета в глифы. Кто-то видит хорошее решение в OpenType-SVG, но, на мой взгляд, оно не является таковым. С прагматичной точки зрения, SVG — «запертая комната» в открытой структуре OpenType. Повторно использовать или связать данные невозможно, равно как и создать связь между таблицей SVG и другими таблицами шрифтов. Из-за этого мы не можем создать вариативный шрифт с вариативными данными SVG».
Этот формат всё ещё развивается. Пока Mozilla не поставляет COLRv1, но она включила этот формат в свой рейтинг и заявила, что он потенциально способен «заменить шрифты OpenType-SVG при использовании в вебе». Apple не торопится внедрять COLRv1 в Safari.
Шрифты COLRv1 будут отображаться и читаться этими браузерами, однако все буквы будут однотонными (его можно настроить через свойство CSS color, как для обычного шрифта). Нам ещё предстоит увидеть, как многие шрифтолитейные студии выпустят шрифты COLRv1, а ведь некоторые популярные инструменты дизайна (например Figma) не поддерживают даже COLRv0. И всё же я верю в то, что они — будущее цветной типографики в вебе. За короткое время существования COLRv1 уже появились прекрасные примеры возможностей этой технологии: Reem Kufi и Bradley Initials.
COLR и CSS
Если вы работаете с цветным шрифтом, то, скорее всего, хотите управлять его цветами. До недавнего времени сделать это средствами CSS было невозможно. Со свойством font-palette можно перезаписывать стандартную цветовую схему шрифта и использовать собственную. Это свойство работает со шрифтами COLRv0 и COLRv1. (Майлз Максфилд из Apple объясняет, что шрифты SVG можно настроить на использование палитр, тогда как все цвета COLR шрифтов автоматически заменяются через CSS).
Создать достойную цветовую палитру – это настоящее искусство. Некоторые дизайнеры шрифтов проделали за нас колоссальную работу и добавили альтернативные палитры в шрифты. С помощью base-palette в CSS вы можете выбирать различные цветовые схемы.
Но как же понять, есть ли в шрифте альтернативная палитра? Это подскажет сайт шрифта. А если не подскажет, то есть удобное средство под названием Wakamai Fondue, которое перечисляет все доступные цветовые схемы (см. в изображении ниже). В этом примере я использую Rocher Color – бесплатный вариативный цветной шрифт от Henrique Beier с нотками Flinstone. После его проверки на Wakamai Foundue видно, что в шрифте используется 4 цвета и он поставляется с 11 разными вариантами палитры.
С помощью base-palette: 0 можно выбрать цветовую палитру по умолчанию (в примере с Rocher это оттенки оранжевого и коричневого).
Через свойство и значение base-palette: 1 выбирается первая альтернативная палитра, определённая создателем шрифта, и т. д. В следующем примере кода я выбираю цветовую палитру с различными оттенками серого:
@font-palette-values --Grays {
font-family: Rocher;
base-palette: 9;
}После выбора палитры через правило CSS @font-palette-values применить её можно через font-palette:
.grays {
font-family: 'Rocher';
font-palette: --Grays;
}Конечно же, вам однажды захочется создать собственную палитру, которая соответствует вашим фирменным цветам или нюансам дизайна. Если вы хотите заменить все цвета, не прописывайте base-palette.
Как пример возьмём Bungee от известного дизайнера шрифтов Дэвида Джонатана Росса. В нём по умолчанию используются 2 цвета: красный и белый. В примере ниже я перезаписываю оба цвета шрифта, а base-palette не используется потому, что она не важна:
@font-palette-values --PinkAndGray {
font-family: bungee;
override-colors:
0 #c1cbed,
1 #ff3a92;
}
@font-palette-values --GrayAndPink {
font-family: bungee;
override-colors:
0 #ff3a92,
1 #c1cbed;
}
Другой способ — можно сначала настроить base-palette, а затем выборочно изменить некоторые цвета. Ниже я использую серую цветовую палитру Rocher, но меняю один цвет на мятно-зелёный:
@font-palette-values --GraysRemix {
font-family: Rocher;
base-palette: 9;
override-colors:
2 rgb(90,290,210);
}
body {
font-family: "Rocher";
font-palette: --GraysRemix;
}При определении override-colors непросто понять, каким числом какой кусочек шрифта будет заменён. Тут придётся поэкспериментировать и получить желаемый эффект можно методом проб и ошибок.
При желании вы можете даже изменить цвет шрифтов эмодзи. Например, Twemoji (см. ниже) или Noto. Вот забавная демонстрация от конструктора шрифтов из Google:
Текущие ограничения
Вот одно из прискорбных ограничений: настраиваемые свойства CSS не работают в @font-palette-values… по крайней мере сейчас. То есть следующая конструкция не заработает:
@font-palette-values --PinkAndBlue {
font-family: bungee;
override-colors:
0 var(--pink),
1 var(--blue);
}Есть и другое ограничение. Анимации и переходы из одной font-palette в другую не интерполируются. Иначе говоря, вы можете моментально переключаться из одной палитры в другую, но не можете создавать между ними плавную анимацию. К сожалению, моя мечта о броском анимированном шрифте эмодзи остаётся мечтой.
Поддержка браузера
font-palette и @font-palette-values поддерживаются в Safari с версии 15.4. В Chrome и Edge они дошли только с выходом версии 101.
Эти данные по поддержке браузеров взяты с Caniuse, где можно найти больше информации. Число обозначает версию, с которой браузер поддерживает данную функцию.
Настольные компьютеры
Chrome | Firefox | IE | Edge | Safari |
101 | Нет | Нет | Нет | 15.4 |
Мобильные устройства / Планшеты
Android Chrome | Android Firefox | Android | iOS Safari |
101 | Нет | 101 | 15.4 |
Примеры использования
Должно быть, вы уже раздумывали над тем, как можно использовать цветные шрифты в своих проектах. Однако есть несколько конкретных примеров, о которых стоит поговорить отдельно.
COLR и иконочные шрифты
Возможно, иконочные шрифты больше и не являются самым популярным методом отображения иконок в сети (Крис объясняет, почему), но они по-прежнему широко используются. При использовании иконочного шрифта с несколькими цветами (например, Duotone с FontAwesome или двухцветные иконки из Материального дизайна) font-palette может предложить упрощённый метод его настройки.
Недавно Нолан Лоусон написал о проблемах использования эмодзи в вебе. В блоге разработчиков Chrome объясняется текущее и довольно сложное решение:
Если вы поддерживаете пользовательский контент, то ваши пользователи, скорее всего, пользуются эмодзи. Сегодня популярная практика – просканировать текст и заменить все встречающиеся эмодзи на изображения, тем самым обеспечив постоянный кроссплатформенный рендеринг и возможность поддержки новых эмодзи, помимо заложенных в операционную систему. Затем в ходе операций с буфером обмена такие изображения вновь переводятся в текст.
Если бы иконочный шрифт COLRv1 получил более широкую браузерную поддержку, то он мог бы предложить метод гораздо проще. Кроме того, у COLRv1 есть преимущество: он выглядит чётко при любом размере, тогда как нативные браузерные эмодзи при больших размерах шрифта пикселизуются и размываются.
Заключение
До появления цветных шрифтов креативность типографики в вебе ограничивалась обводкой и градиентной заливкой через CSS. Вы всегда могли сделать нечто более оригинальное с векторным изображением, но это не настоящий текст: пользователь не сможет выделить его и скопировать в буфер обмена; по нему нельзя выполнить поиск на странице через Command+F; он не читается средствами чтения с экрана. Чтобы просто отредактировать что-то, вам придётся открывать Adobe Illustrator.
Цветные шрифты потенциально способны привлекать внимание пользователя, что делает их идеальными для баннеров и посадочных страниц. Может, это и не тот вариант, к которому вы часто прибегаете, но такие шрифты могут дать новые возможности творческого выражения в веб-дизайне, которые сделают ваш сайт по-настоящему заметным.
А мы поможем прокачать ваши навыки или с самого начала освоить профессию, актуальную в любое время:
Выбрать другую востребованную профессию.
