@font-palette-values

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

Значение <dashed-ident> — это определяемый пользователем идентификатор, который, хотя и выглядит как настраиваемое свойство CSS, ведет себя иначе и не заключён в функцию CSS var().

font-family

Указывает имя семейства шрифтов, к которому можно применить эту палитру.

base-palette

Указывает имя или индекс базовой палитры, созданной разработчиком шрифта, которую нужно использовать.

override-colors

Указывает цвета в базовой палитре, которые нужно переопределить.

@font-palette-values = 
  @font-palette-values <dashed-ident> { <declaration-list> }  

Этот пример демонстрирует, как изменить некоторые или все цвета в цветовом шрифте.

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;
}

Результат

При переопределении цветов обычной или базовой палитры с индексом 0, нет необходимости указывать, какую базовую палитру использовать. Это необходимо только при переопределении другой базовой палитры. Если вы переопределяете все цвета, то также нет необходимости указывать используемую базовую палитру.

• font-palette свойство
• font-family дескриптор
• base-palette дескриптор
• override-colors дескриптор
• CSSFontPaletteValuesRule