@font-palette-values CSS at-rule

Syntax

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

Das <dashed-ident> ist ein benutzerdefinierter Bezeichner, der zwar wie eine CSS-Custom-Property aussieht, sich jedoch anders verhält und nicht in eine CSS-var()-Funktion eingeschlossen wird.

Deskriptoren

base-palette

Gibt den Namen oder Index der vom Schrifthersteller erstellten Basispalette an, die verwendet werden soll.

font-family

Gibt den Namen der Schriftfamilie an, auf die diese Palette angewendet werden kann. Ein font-family-Name ist erforderlich, damit die Regel @font-palette-values gültig ist.

override-colors

Gibt die Farben in der Basispalette an, die überschrieben werden sollen.

Formale Syntax

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

Beispiele

Farben in einer vorhandenen Palette überschreiben

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

HTML

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

CSS

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
p {
  font-family: "Bungee Spice", fantasy;
  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 Basispalette mit Index 0 müssen Sie nicht angeben, welche Basispalette verwendet werden soll. Dies sollte nur erfolgen, wenn eine andere Basispalette überschrieben wird. Wenn Sie alle Farben überschreiben, müssen Sie ebenfalls nicht die zu verwendende Basispalette angeben.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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