Компактные, удобные для сжатия цветные векторные шрифты со всеми вашими любимыми вариантами градиентов.
В Chrome 98 команды Chrome и Fonts добавили поддержку COLRv1, эволюции формата шрифта COLRv0, предназначенного для широкого распространения цветных шрифтов за счет добавления градиентов, композиции и смешивания, а также улучшенного повторного использования внутренних форм для получения четких и компактных файлов шрифтов, которые хорошо сжимаются. .
Цвет сейчас
В Интернете текст обычно рисуется цветом, указанным в CSS. Шрифт не определяет какой-либо конкретный цвет, он просто указывает, где следует разместить пиксели. Обычно это хорошо. CSS позволяет автору гибко выбирать цвет. Однако иногда глиф содержит несколько цветов, которые вместе имеют значение. Например, этот флаг 
со светло-голубыми, розовыми и белыми полосами не будет передавать то же значение, если бы он был просто нарисован текущим цветом текста.
Сегодня для большинства пользователей смайлы — единственные цветные шрифты, которые они видят. Эмодзи обычно появляются в Интернете с помощью системного шрифта эмодзи или путем вставки изображений (что имеет свои сложности, 
). Большие размеры файлов, особенно для цветных шрифтов на основе растровых изображений, затрудняют использование веб-шрифтов для эмодзи. Поддерживая COLRv1, мы надеемся увидеть распространение творческого использования цветных шрифтов в Интернете и за его пределами.
Покажи мне свои цвета
Мы создали для вас несколько примеров:
Используемые в примере ресурсы из Google Fonts доступны в веб-API Google Fonts . Они не указаны в каталоге Fonts.google.com , поскольку будут работать только в Chrome 98 или более поздних версиях и демонстрируют экспериментальные работы.
Теперь вы можете создавать свои собственные шрифты COLRv1, используя бесплатные инструменты с открытым исходным кодом. Ознакомьтесь с компилятором шрифтов nanoemoji , который позволяет создавать шрифты COLRv1 из исходных изображений SVG, а затем попробуйте их в Chrome 98 или более поздней версии. Попробуйте создать свой собственный вариант Bungee Spice, изменив цвета градиента, следуя этим инструкциям .
Например, вы можете изменить шрифт Bungee Spice, добавив сине-красный градиент, вот так:
Отправьте свои результаты в Твиттере @googlefonts 🙂 Почему бы не попробовать радиальный или плавный градиент?
Новое в COLRv1
Формат шрифта поддерживает несколько способов поддержки цвета, каждый из которых имеет разные компромиссы, но ни один из них пока не добился успеха в Интернете. (Чтобы узнать больше о компромиссах, ознакомьтесь с выступлением Доминика на конференции BlinkOn 15. ) В Chrome 98 реализована поддержка COLRv1, эволюции COLRv0. Мы надеемся, что сочетание графических возможностей COLRv1 и компактных файлов сделает его хорошим выбором для многих случаев использования цветных шрифтов. В COLRv1 добавлены градиенты, композитинг и смешивание , а также улучшено повторное использование внутренних форм для создания еще более компактных файлов.
COLRv1 обладает выразительными возможностями, примерно эквивалентными SVG Native, плюс добавлены смешивание и композитинг . Существует четыре типа цветовых заливок: сплошные цвета, линейные градиенты, радиальные градиенты и развертки/конические градиенты. COLRv1 позволяет изменять положение и преобразовывать элементы глифа, используя полный набор преобразований перемещения, поворота, наклона и масштабирования. Кроме того, он поддерживает варианты шрифтов и повторно использует в шрифте существующие форматы определений фигур.
В качестве примера подумайте о смайликах хрустального шара: блики в форме звезд имеют одинаковую форму, но разные размеры, что означает, что только одну фигуру можно перемещать и повторно использовать без дублирования внутри файла. Этот формат позволяет повторно использовать полный глиф в новом глифе без необходимости избыточного кодирования одних и тех же фигур для каждого глифа. Представьте себе декоративный цветной шрифт с цветочным орнаментом, в котором одни и те же цветочные фигуры размещаются на разных буквах путем простой ссылки на существующие цветные глифы. В случае использования веб-шрифтов COLRv1 хорошо сжимается под woff2. Например, тестовая сборка Twemoji с использованием COLRv1 занимает около 1,2 МБ в раздутом виде, но около 0,6 МБ в форме woff2. Сборка полного набора Noto Emoji Glyph уменьшена с 9 МБ для растровой версии до 1,85 МБ в форме COLRv1+woff2.
Варианты использования цветных шрифтов
Броские заголовки
Шрифт свежего цвета делает визуальные выделения, заголовки и баннеры действительно яркими.
Больше никакой замены изображений: шрифты эмодзи
Если вы поддерживаете пользовательский контент, ваши пользователи, вероятно, используют смайлы. Сегодня очень принято сканировать текст и заменять любые встречающиеся смайлы изображениями, чтобы обеспечить согласованный кросс-платформенный рендеринг и возможность поддержки новых смайлов, чем поддерживает ОС. Затем эти изображения необходимо снова превратить в текст во время операций с буфером обмена. Вот реальный пример:
Если у вас есть шрифт Emoji, вы просто отображаете текст шрифтом, например:
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
Аналогичным образом, в компоненте реакции эмодзи COLRv1 предлагает возможность использовать компактный файл шрифта вместо каталога графических ресурсов.
Представьте себе, сколько изображений вам нужно будет получить, чтобы получить полный набор смайлов!
Цвет иконочных шрифтов
Использование цвета в шрифтах значков добавляет ясности и облегчает понимание глифов.
Художественное выражение
Компактные цветные шрифты открывают новые формы художественного выражения в тексте в Интернете. В этом примере арабского шрифта в стиле куфи используются цветовые градиенты как художественная интерпретация того, как может выглядеть поток чернил традиционной каллиграфии применительно к стилю арабского письма куфи, который возникает из-за того, что он пишется не пером и чернилами, а вырезается камень.
Обнаружение функций
На данный момент выяснить, поддерживает ли движок браузера определенный формат цветового шрифта, можно с помощью анализа пользовательского агента или поиска в такой библиотеке, как ChromaCheck от @PixelAmbacht, для проверки рендеринга цветных глифов на Canvas. Оба решения не являются оптимальными. Тестирование функций должно обнаруживать только конкретную функцию и избегать перехвата пользовательского агента. Библиотеке ChromaCheck не нужно выполнять ресурсоемкие операции с 2D-холстом для определения поддержки.
Команда Chrome хочет улучшить это и начала серию обсуждений [ 1 , 2 ] в рабочей группе CSS, чтобы предоставить информацию о поддержке технологии шрифтов браузера в JavaScript и декларативно в CSS. Команда планирует выпустить эффективную функцию обнаружения цветных шрифтов и других технологий шрифтов в будущей версии Chrome.
Если вы хотите использовать цветные шрифты в своем проекте прямо сейчас, когда поддержка COLRv1 ограничена Chrome, вы можете сделать это двумя способами: попросить у поставщика шрифтов шрифт COLRv1, который также содержит монохромные глифы. Пользовательские агенты, которые не поддерживают COLRv1, вернутся к рендерингу монохромных глифов. Альтернативно вы можете использовать библиотеку ChromaCheck или анализ пользовательского агента, чтобы определить, доступна ли поддержка COLRv1. Затем вы предоставляете CSS, который загружает шрифты COLRv1 в поддерживающие пользовательские агенты и используете альтернативный формат шрифта, такой как COLRv0, формат растрового шрифта или OpenType SVG в других браузерах.
Поддержка палитры шрифтов CSS
Было бы чрезвычайно полезно, если бы использование другого набора цветов не требовало нового шрифта. К счастью, такой механизм существует: CSS-свойство font-palette . Команда Chrome работает над добавлением поддержки палитры шрифтов в Chrome .
Шрифты COLRv1 и вы
Если вас заинтересовали шрифты COLRv1, спросите у своего поставщика шрифтов о цветном шрифте COLRv1, который можно использовать в вашем проекте, попробуйте приведенные выше примеры и демо-версии или почему бы не сразу погрузиться и поэкспериментировать, создав свой собственный ?
Если у вас есть отзыв о COLRv1 в Chrome, опубликуйте его в списке рассылки Blink-dev или сообщите о проблеме в нашем трекере проблем . Если у вас есть отзывы о самом формате шрифта COLRv1, сообщите о проблеме в репозитории GitHub спецификации COLRv1 .
В Chrome 98 мы рады тому, что COLRv1 выводит в Интернет совершенно новый уровень типографского творчества.
Узнать больше
Если вас интересуют подробности, у нас есть для вас еще пара ресурсов:
Чтобы узнать, как работает COLRv1 и как он реализован в Chrome, ознакомьтесь с выступлением Доминика на конференции BlinkOn 15.
- Международная конференция Unicode № 45: Векторные цветные шрифты, выступление Родерика Шитера, Питера Констебла и Доминика Ретчеса ( видео , подробности выступления )
- компилятор шрифтов nanoemoji , создающий шрифты COLRv1 из изображений SVG
- Репозиторий цветных шрифтов Google Fonts на GitHub, содержащий текущие сборки Noto Emoji, Twemoji и других образцов шрифтов.
- Демонстрация DJR шрифта Bradley Initials с изучением COLRv1
- Инструмент и библиотека ChromaCheck для определения доступных технологий цветных шрифтов.
Благодарности
Большое спасибо Бехдаду Исфабоду, Козимо Лупо, Питеру Констеблу, Бену Вагнеру, Вернеру Лембергу, Дэйву Кроссленду, Владимиру Левантовски, Джонатану Кью, Лоуренсу Пенни, Крису Лилли, Дэвиду Джонатану Россу, Underware, Джасту ван Россуму, Роэлу Нискенсу и другим за их вклад в COLRv1.