@font-palette-values

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2022⁩.

Die @font-palette-values CSS At-Regel ermöglicht es Ihnen, die Standardwerte der vom Schriftgestalter erstellten font-palette anzupassen.

Syntax

css

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

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

Deskriptoren

base-palette: Gibt den Namen oder Index der vom Schriftgestalter erstellten Basis-Palette 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 @font-palette-values Regel gültig ist.
override-colors: Gibt die Farben in der Basis-Palette an, die überschrieben werden sollen.

Formale Syntax

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

Beispiele

Überschreiben von Farben in einer vorhandenen Palette

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

HTML

html

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

CSS

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 Basis-Palette am Index 0 brauchen Sie nicht anzugeben, welche Basis-Palette verwendet werden soll. Dies sollte nur erfolgen, wenn eine andere Basis-Palette überschrieben wird. Wenn Sie alle Farben überschreiben, ist es ebenfalls nicht notwendig, die zu verwendende Basis-Palette anzugeben.

Spezifikationen

Specification
CSS Fonts Module Level 4 # at-ruledef-font-palette-values

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden