CSS font-palette: управление цветами шрифтов

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.

Значения свойства font-palette

• normal — использовать первую палитру (по умолчанию).
• light или dark — выбрать палитры для светлого/тёмного фона, если они определены в шрифте; иначе normal.
• --myPalette — идентификатор собственной палитры, определённой правилом @font-palette-values.
• palette-mix(...) — функция для смешивания двух палитр с указанием метода и процентного соотношения.

Пример использования

@media (prefers-color-scheme: dark) {
  .title {
    font-palette: dark;
  }
}

Как определять собственные палитры

Для этого используется правило @font-palette-values:

@font-palette-values --alt {
  font-family: "Bungee Spice";
  base-palette: 2;
  override-colors: 0 #00ffbb, 1 #007744;
}

.heading {
  font-family: "Bungee Spice";
  font-palette: --alt;
}

• font-family задаёт, к какому шрифту применяется палитра.
• base-palette выбирает подмножество (по индексу или ключу light/dark).
• override-colors даёт возможность заменить отдельные цвета в палитре.

Смешивание палитр:

palette-mix() позволяет плавно смешивать две палитры:

font-palette: palette-mix(in lch, --blueTheme 60%, --yellowTheme 40%);

Можно настраивать цветовое пространство (lch, srgb, hsl и др.) и то, в каком процентном соотношении смешиваются палитры.

Важно отметить, что функция пока частично экспериментальна и может не работать во всех браузерах.

Итого

• Что: font-palette — управление цветами цветных шрифтов напрямую через CSS.
• Когда: полностью доступно в браузерах с мая 2025.
• Зачем: применять тематические, светлые/тёмные и брендированные палитры.
• Как:
  1. Выбрать встроенную палитру (normal, light, dark).
  2. Объявить свою через @font-palette-values.
  3. Применить font-palette или смешать с palette-mix().

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.