Свойство CSS `font-palette`

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

Синтаксис

/* Using a font-defined palette */
font-palette: normal;

/* Using a user-defined palette */
font-palette: --one;

/* Creating a new palette by blending two others */
font-palette: palette-mix(in lch, --blue, --yellow);

Значения

Это свойство задаётся одним значением из следующего списка:

normal

Задаёт палитру по умолчанию или стандартную раскраску глифов (установленную создателем шрифта), которая будет использоваться для шрифта. При этой настройке отображается палитра шрифта с индексом 0.

light

Задаёт первую палитру шрифта, соответствующую значению «светлая». В некоторых шрифтах есть метаданные, указывающие, что палитра подходит для светлого (почти белого) фона. Если в шрифте нет таких метаданных, значение light ведёт себя как normal.

dark

Задаёт первую палитру шрифта, соответствующую значению «тёмная». В некоторых шрифтах есть метаданные, указывающие, что палитра подходит для тёмного (почти чёрного) фона. Если в шрифте нет таких метаданных, значение ведёт себя как normal.

<dashed-ident>

Позволяет задать собственные значения палитры шрифта, используя <palette-identifier> директивы @font-palette-values.

palette-mix()

Создаёт новое значение font-palette, объединяя два значения font-palette в заданных пропорциях и с использованием указанных методов интерполяции цветов.

Формальное определение

Формальный синтаксис

font-palette = 
  normal |
  light |
  dark |
  <palette-identifier> |
  <palette-mix()>

<palette-identifier> = 
  <dashed-ident>

<palette-mix()> = 
  palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

Примеры

Указание тёмной палитры

В этом примере можно использовать первую палитру, помеченную создателем шрифта как тёмная (лучше всего подходит для почти чёрного фона).

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

Анимация между двумя палитрами

В этом примере показано, как анимировать изменения значения font-palette для создания плавной анимации шрифта.

HTML

HTML содержит один абзац текста для анимации:

<p>color-palette<br />animation</p>

CSS

В CSS мы импортируем цветной шрифт цветной шрифт под названием Nabla из Google Fonts и определяем два пользовательских значения font-palette с помощью директивы @font-palette-values. Затем мы создаём @keyframes, которые анимируют переход между этими двумя палитрами, и применяем эту анимацию к абзацу.

@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";

@font-palette-values --blue-nabla {
  font-family: "Nabla";
  base-palette: 2; /* this is Nabla's blue palette */
}

@font-palette-values --grey-nabla {
  font-family: "Nabla";
  base-palette: 3; /* this is Nabla's grey palette */
}

@keyframes animate-palette {
  from {
    font-palette: --grey-nabla;
  }

  to {
    font-palette: --blue-nabla;
  }
}

p {
  font-family: "Nabla", fantasy;
  font-size: 5rem;
  margin: 0;
  text-align: center;
  animation: animate-palette 4s infinite alternate linear;
}

Результат

Результат выглядит так:

Спецификации

Совместимость с браузерами

См. также

• palette-mix()
• @font-palette-values
• base-palette дескриптор
• font-family дескриптор
• override-colors дескриптор