@font-palette-values
Baseline 2022Newly 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
@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
<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 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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@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
font-palette
-Eigenschaftfont-family
-Deskriptorbase-palette
-Deskriptoroverride-colors
-DeskriptorCSSFontPaletteValuesRule