Font-palette

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

Синтаксис

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

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

Значения

normal

Определяет цветовую палитру по умолчанию или цветовую гамму глифа по умолчанию (заданную производителем шрифтов), которая будет использоваться для шрифта. С помощью этого параметра отображается палитра шрифта с индексом 0.

light

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

dark

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

<palette-identifier>

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

Пример

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

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

@font-palette-values

Правило @font-palette-values позволяет настраивать значения по умолчанию для палитры шрифтов, созданной создателем шрифтов.

Синтаксис

@font-palette-values --identifier {
  font-family: Bixa;
}
.my-class {
  font-palette: --identifier;
}

@font-palette-values = 
 @font-palette-values <пунктирный идентификатор> { <объявление-список> } 

Пример

В этом примере показано, как можно изменить некоторые или все цвета в цветном шрифте.

HTML

<p>default colors</p>
<p class="alternate">alternate colors</p>

CSS

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
p {
  font-family: "Bungee Spice";
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors: 
    0 #00ffbb, 
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}