Обычный шрифт хранит форму глифа, а цвет задаёт приложение: CSS, графический редактор или операционная система. Цветной шрифт меняет эту модель. Он может хранить внутри файла слои, палитры, SVG-описания или bitmap-изображения, поэтому один символ сразу становится многоцветным.
Цветные шрифты важны не только для emoji. Они полезны для иконок, декоративных заголовков, инфографики, логотипических наборов и интерфейсных символов. Но это не универсальная замена SVG-иконкам или обычному тексту: поддержка, размер и доступность зависят от выбранной технологии.
Какие бывают цветные шрифты
OpenType допускает несколько способов хранить цвет. На практике чаще обсуждают COLR/CPAL, SVG glyphs и bitmap strikes.
| Подход | Как устроен | Где уместен |
|---|---|---|
| COLR/CPAL | Векторные слои плюс палитры | Иконки, emoji нового поколения, декоративные наборы |
| SVG glyphs | SVG-данные внутри шрифта | Сложная векторная графика, градиенты, иллюстративные знаки |
| Bitmap strikes | Готовые растровые изображения под размеры | Emoji и пиксельные наборы, где важен точный вид |
| Обычный монохром | Один контур, цвет задаёт CSS | Основной текст, интерфейсы, body copy |
Если нужен обычный абзац текста, цветной шрифт почти никогда не нужен. Если нужен набор многоцветных пиктограмм, он может быть удобнее, чем россыпь отдельных SVG-файлов.
COLR и CPAL
COLR описывает, как собрать цветной глиф из слоёв и графических операций. CPAL хранит палитры. Microsoft публикует спецификации обеих таблиц: COLR table и CPAL table.
COLR v0 работал как набор плоских цветных слоёв. COLR v1 добавил более выразительные возможности: градиенты, трансформации, композицию. Именно поэтому COLR/CPAL стал важной темой для современных emoji и компактных цветных иконок.
| Свойство | COLR/CPAL |
|---|---|
| Векторность | Да, при COLR-подходе глиф масштабируется как вектор |
| Палитры | CPAL позволяет хранить несколько цветовых наборов |
| Размер | Часто компактнее bitmap-наборов |
| CSS | Может работать с `font-palette`, если поддержка есть |
| Риск | Нужна проверка браузеров и ОС, особенно для COLR v1 |
SVG внутри OpenType
SVG table позволяет хранить SVG-документ для глифа. Спецификация описана в OpenType SVG table. Такой подход удобен, когда знак ближе к маленькой иллюстрации, чем к набору простых слоёв.
Плюс SVG-подхода - выразительность. Минус - не вся среда одинаково поддерживает такие шрифты, а сложные SVG могут быть тяжелее и непредсказуемее для рендера. Для UI-иконок часто проще держать отдельные SVG, если не нужна именно шрифтовая модель.
Bitmap-подход
Bitmap color fonts хранят растровые изображения глифов под определённые размеры. Это исторически важно для emoji: дизайнер хочет, чтобы символ выглядел точно, с тенями, деталями и пиксельной сеткой. Но bitmap плохо масштабируется: крупный размер требует больше данных, а промежуточные размеры могут выглядеть мягко.
Для пиксельной эстетики bitmap может быть преимуществом. Для адаптивного интерфейса обычно удобнее векторный подход.
CSS и палитры
CSS постепенно получает инструменты для управления цветовыми палитрами шрифтов. MDN описывает font-palette: свойство позволяет выбирать палитру цветного шрифта там, где это поддерживается.
Пример:
```css .icon-font { font-family: "Color Icons"; font-palette: dark; } ```
Но рассчитывать на `font-palette` как на единственный механизм брендинга пока рискованно. Всегда проверяйте fallback: что увидит пользователь, если палитра не применится или цветной формат не поддерживается.
Когда цветной шрифт лучше SVG
Цветной шрифт хорош, когда набор символов ведёт себя как шрифт: вставляется в текст, наследует размер, выравнивается по baseline, хранится в одном файле, работает в OpenType-пайплайне. Например: набор emoji-подобных реакций, пиктограммы внутри текста, декоративные буквенные знаки.
SVG лучше, когда иконка является самостоятельным UI-элементом: у неё aria-label, состояния hover/active, разные размеры, анимация, сложная доступность. В таком случае отдельный SVG-компонент управляемее.
| Задача | Лучше выбрать |
|---|---|
| Иконка внутри строки текста | Цветной шрифт или обычный icon font |
| Кнопка с доступным названием | SVG-компонент |
| Emoji-набор | Color font |
| Логотип | SVG или векторный исходник |
| Декоративный заголовок | COLR/CPAL может быть уместен |
| Основной текст статьи | Обычный монохромный шрифт |
Что проверять перед публикацией
1. Поддерживается ли формат в целевых браузерах и ОС. 2. Есть ли монохромный fallback или обычный шрифт на случай неподдержки. 3. Не слишком ли большой файл относительно SVG-альтернативы. 4. Не ломается ли baseline рядом с обычным текстом. 5. Корректно ли работает цвет в светлой и тёмной теме. 6. Есть ли лицензия на распространение именно цветного файла. 7. Не используется ли цвет как единственный способ передать смысл.
Последний пункт важен для доступности. Если красный и зелёный значки различаются только цветом, часть пользователей не увидит различия. Форма, подпись или aria-label должны сохранять смысл.
Итог
Цветной шрифт - это шрифт, который несёт не только форму, но и цветовую модель. COLR/CPAL подходит для компактных векторных слоёв и палитр, SVG glyphs - для более сложной графики, bitmap - для точного растрового вида. Выбирать нужно не по модности технологии, а по задаче: текст, emoji, иконки, декоративные буквы и UI-компоненты требуют разных решений.