font-palette

normal

Указывает стандартную палитру цветов или стандартное цветовое оформление глифов (установленное создателем шрифта) для использования в шрифте. С этим параметром рендерится палитра в шрифте с индексом 0.

light

Указывает первую палитру в шрифте, соответствующую 'light', для использования в шрифте. Некоторые шрифты содержат метаданные, которые идентифицируют палитру как применимую для светлого (близкого к белому) фона. Если в шрифте таких метаданных нет, значение light ведет себя как normal.

dark

Указывает первую палитру в шрифте, соответствующую 'dark', для использования в шрифте. Некоторые шрифты содержат метаданные, которые идентифицируют палитру как применимую для тёмного (близкого к чёрному) фона. Если в шрифте таких метаданных нет, значение ведет себя как normal.

<palette-identifier>

Позволяет указать собственные значения для палитры шрифта с помощью атрибута @font-palette-values. Это значение задаётся в формате <dashed-ident>.

palette-mix()

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

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

<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>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  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  

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

@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 url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

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

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

@keyframes animate-palette {
  from {
    font-palette: --greyNabla;
  }

  to {
    font-palette: --blueNabla;
  }
}

p {
  font-family: "Nabla";
  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 описатель