@font-palette-values

Baseline 2022
Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die @font-palette-values CSS-At-Regel ermöglicht es, 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 ähnlich wie eine CSS-Custom-Property aussieht, sich jedoch anders verhält und nicht in einer CSS var()-Funktion genutzt wird.

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

Farben in einer bestehenden Palette überschreiben

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

HTML

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

CSS

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 am Index 0 müssen Sie nicht angeben, welche Basis-Palette verwendet werden soll. Dies sollte nur getan werden, 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@font-palette-values
base-palette
font-family
override-colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch