Логотип Зефирнет

COLRv1 и палитра шрифтов CSS: веб-типографика становится красочной

Дата:

По словам Тоши Омагари, автора типографики аркадных игр, первый многоцветный цифровой шрифт была создана в 1982 году для так и не вышедшей видеоигры Insector. Разноцветные шрифты, иногда называемые хроматический тип, по-прежнему относительно редко встречаются в Интернете, хотя Формат шрифта COLR имеет полную кросс-браузерную поддержку с 2018 года (даже в Internet Explorer!).

Эта технология открывает совершенно новую вену типографского творчества. В то время как некоторые из цветных шрифтов, которые я видел, были аляповатыми, в лучшем случае хроматические шрифты забавны, инновационны и привлекают внимание. С добавлением новых функций CSS, включая font-palette собственность и @font-palette-values правило — для управления цветовой палитрой цветных шрифтов и эволюции формата шрифта COLR самое время погрузиться и поэкспериментировать с тем, что может современная веб-типографика.

поддержка ЦВЕТ

Я последний писал про цветные шрифты в 2018 году. На тот момент было четыре разных стандарта для многоцветных шрифтов: OpenType-SVG, COLR, SBIX и CBDT/CBLC. Ты можешь использовать ChromaCheck чтобы узнать, какие форматы цветных шрифтов поддерживает ваш браузер.

Google Chrome имеет пометил OpenType-SVG как «wontfix» это означает, что этот формат никогда не будет поддерживаться Chrome или Edge. SBIX и CBDT/CBLC в основном можно игнорировать при использовании в Интернете, поскольку они оба основаны на растровых изображениях и становятся размытыми при больших размерах шрифта. Большой размер файла растровых шрифтов также делает их плохим выбором для Интернета.

Ульрике Рауш является создателем ЛибеХайде, растровый цветной шрифт, который невероятным образом имитирует внешний вид шариковой ручки. «Моей самой большой целью всегда было максимально достоверно воспроизвести рукописный текст», — сказала она мне. «Для LiebeHeide я наконец смог смоделировать эти атрибуты ручной работы с помощью шрифта. Обратная сторона? Все изображения PNG в файле шрифта складываются и приводят к огромному размеру файла OTF. Это может не быть проблемой для настольных приложений, таких как Adobe InDesign, но для использования в Интернете этот шрифт вряд ли применим».

Все браузеры поддерживают шрифты COLR (теперь они обычно называются COLRv0). Версия 98 Chrome (и Edge), выпущенная в феврале, добавила поддержку COLRv1, эволюцию формата.

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

Для ПК

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

Скриншот шрифта.
Плакато от литейного завода Underware

COLRv1 является частью Стандарт OpenType 1.9. В то время как первоначальному COLRv0 не хватало многих творческих возможностей OpenType-SVG, COLRv1 соответствует этим возможностям, избегая при этом определенных недостатков. COLRv0, например, может отображать только сплошные цвета, тогда как COLRv1 может линейный, радиальный, и конические градиенты. Формат также добавляет компоновка и смешивание и позволяет повторно использовать форму для экономии размера файла.

Эксперт по типографии Роэл Нискинс объясняет: «Раньше я говорил, что формат OpenType-SVG был лучшим форматом, поскольку он предлагал наибольшую гибкость — пока я не понял, что он слишком сложен для низкоуровневой работы, такой как рендеринг текста. Он реализует базовое подмножество SVG на уровне рендеринга шрифтов. Но он плохо работает с другими технологиями шрифтов (подсказки, переменные оси и т. д.), и его сложно реализовать. Итак, я перешел на COLR. COLR в основном повторно использует все, что уже есть в шрифтах OpenType. Это «только» добавляет слои и возможность изменить цвет каждого слоя. Простой, но эффективный."

COLRv1 полностью совместим с осями вариативного шрифта, и уже есть примеры вариативных шрифтов COLR, например Знак заслуг, Плакато Цвет и Цвет Роше.

Вот яркий пример от Ульрике Рауш того, что возможно с форматом (в настоящее время не выпущенным) шрифтом, который в цифровом виде воссоздает внешний вид неоновой вывески:

Скриншот шрифта COLR ярко-розового цвета на светлом и темном фоне.

Аким Хелмлинг из литейного цеха Underware в восторге от COLRv1, говоря мне, что «формат COLRv1 потенциально может оказать такое же (или даже большее) влияние на шрифтовой дизайн, чем вариативные шрифты в последние годы». Для Акима это, несомненно, лучший формат. «Все прежние цветовые форматы были неудачными попытками добавить цвета глифам. Хотя некоторые считают OpenType-SVG хорошим решением, с моей точки зрения, это совсем не так. С прагматической точки зрения SVG — это «запертая комната» внутри открытой структуры OpenType. Невозможно повторно использовать или связать данные или создать соединение между другими таблицами шрифтов и таблицей SVG. И из-за этого мы не можем сделать переменный шрифт с переменными данными SVG».

Это все еще ранние дни для формата. Mozilla еще не выпустила COLRv1, но предприняла положительная позиция о формате, заявив, что он «потенциально может заменить шрифты OpenType-SVG в веб-использовании». Apple не хочет внедрять его в Safari.

Шрифты COLRv1 по-прежнему будут отображаться и читаться в этих браузерах, но все буквы будут иметь один сплошной цвет (который вы можете установить с помощью CSS color свойство, как и с обычным шрифтом). Нам еще предстоит увидеть, как многие литейщики шрифтов выпускают шрифты COLRv1, а некоторые популярные инструменты дизайна, такие как Figma, даже не поддерживают COLRv0, но я надеюсь и верю, что это будет будущее цветной типографики в Интернете. За короткое время существования COLRv1 уже было несколько прекрасных примеров того, на что способна эта технология, например: Рим Куфи и Инициалы Брэдли.

ЦВЕТ и CSS

Если вы используете цветной шрифт, вы, вероятно, захотите управлять его цветами. До сих пор это было невозможно сделать с помощью CSS. font-palette дает возможность переопределить цветовую схему шрифта по умолчанию и применить собственную. Это свойство работает с гарнитурами COLRv0 и COLRv1. (яблочный Майлз Максфилд объясняет, что шрифты SVG могут выбрать в использовать палитры, в то время как все цвета шрифта COLR автоматически переопределяется CSS.)

Придумать достойную цветовую палитру — настоящее искусство. Некоторые дизайнеры шрифтов проделали за нас тяжелую работу и включили в шрифт альтернативные палитры. Вы можете выбрать из этих различных цветовых схем, используя base-palette в CSS.

Как узнать, предлагает ли шрифт альтернативную палитру? Сайт для шрифта может сказать вам. Если нет, есть удобный инструмент под названием Фондю Вакамай в нем будут перечислены все доступные цветовые схемы (показаны на изображении ниже). Для этого примера я буду использовать Цвет Роше, бесплатный шрифт с переменным цветом от Henrique Beier с атмосферой Flintstones. Глядя на Wakamai Foundue, мы видим, что этот шрифт использует четыре цвета и поставляется с одиннадцатью различными вариантами палитры.

Сетка шестнадцатеричных значений цвета.

. base-palette: 0 выберет цветовую палитру по умолчанию (в случае Rocher это оттенки оранжевого и коричневого).

Шрифт Rocher COLR.

. 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 от новаторского шрифтового дизайнера Дэвид Джонатан Росс Например. По умолчанию он использует только два цвета: красный и белый. В следующем примере я переопределяю оба цвета шрифта, поэтому 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 трудно понять, какой бит шрифта будет переопределен каким номером — вам нужно поиграть, поэкспериментировать и добиться желаемого эффекта методом проб и ошибок.

Шрифт Rocher COLR.

При желании вы даже можете изменить цвет шрифтов эмодзи, таких как Твемодзи (показано ниже) или 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, и появились в Хром и Эдж с выходом версии 101.

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

Для ПК

Chrome Firefox IE Edge Safari
101 Нет Нет Нет 15.4

Мобильный/Планшет

Android Chrome Android Firefox Android Система IOS Safari
101 Нет 101 15.4

Use cases

Вероятно, вы уже представляете, как использовать цветные шрифты в своих проектах. Однако есть несколько конкретных вариантов использования, о которых стоит упомянуть.

COLR и иконочные шрифты

Шрифты значков больше не могут быть самым популярным методом отображения значков в Интернете (Крис объясняет, почему), но они все еще широко используются. Если вы используете иконочный шрифт с несколькими цветами, например Duotone от FontAwesome или двухцветные значки от Материал Дизайн, font-palette может предложить более простой способ настройки.

Сетка иконок Duotone.

Решение проблемы с эмодзи

Нолан Лоусон недавно писал о проблемы с использованием эмодзи в сети, Блог разработчиков Chrome объясняет одно довольно сложное текущее решение:

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

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

Подведение итогов

До появления цветных шрифтов типографское творчество в Интернете ограничивалось применением обводки или градиентной заливки с помощью CSS. С векторным изображением всегда можно сделать что-то более нестандартное, но это не настоящий текст — его нельзя выбрать пользователем и скопировать в буфер обмена, его нельзя найти на странице с помощью Command+F, он не читается программами чтения с экрана или поисковыми системами, и вам нужно будет открыть Adobe Illustrator только для того, чтобы отредактировать копию.

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

Spot_img

Последняя разведка

Spot_img