@font-palette-values

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

Der <dashed-ident> ist ein benutzerdefinierter Bezeichner, der, obwohl er wie eine CSS Custom Property aussieht, sich anders verhält und nicht in einer CSS var()-Funktion eingeschlossen ist.

font-family

Gibt den Namen der Schriftfamilie an, auf die diese Palette angewendet werden kann.

base-palette

Gibt den Namen oder Index der vom Schriftart-Ersteller erstellten Basis-Palette an, die verwendet werden soll.

override-colors

Gibt die Farben in der Basis-Palette an, die überschrieben werden sollen.

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

Dieses Beispiel zeigt, wie Sie einige oder alle Farben in einer Farb-Schriftart ändern können.

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

Ergebnis

Beim Überschreiben von Farben der normalen oder Basis-Palette an Index 0 müssen Sie nicht angeben, welche Basis-Palette verwendet werden soll. Dies sollte nur erfolgen, wenn eine andere Basis-Palette überschrieben wird. Wenn Sie alle Farben überschreiben, ist es auch nicht notwendig, die zu verwendende Basis-Palette anzugeben.

• font-palette Eigenschaft
• font-family Deskriptor
• base-palette Deskriptor
• override-colors Deskriptor
• CSSFontPaletteValuesRule