Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
font-palette
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.
* Some parts of this feature may have varying levels of support.
Diefont-paletteCSS Eigenschaft ermöglicht es, eine der vielen Paletten anzugeben, die in einerFarbfont enthalten sind, die ein Benutzeragent für die Schriftart verwenden kann. Benutzer können auch die Werte in einer Palette überschreiben oder eine neue Palette erstellen, indem sie die@font-palette-values at-Regel verwenden.
Hinweis:Einefont-palette Palette hat Vorrang bei der Färbung einer Schriftart. Diecolor Eigenschaft wird eine Schriftartenpalette nicht überschreiben, selbst wenn sie mit!important angegeben wird.
Syntax
/* Using a font-defined palette */font-palette: normal;/* Using a user-defined palette */font-palette: --one;/* Creating a new palette by blending two others */font-palette: palette-mix(in lch, --blue, --yellow);Werte
normalGibt die Standard-Farbpalette oder die Standard-Glyphenfärbung an (vom Schriftartenhersteller festgelegt), die für die Schriftart verwendet werden soll. Mit dieser Einstellung wird die Palette im Schriftfont an Index 0 gerendert.
lightGibt die erste Palette im Schriftart an, die 'light' entspricht und für die Schriftart verwendet werden soll. Einige Schriftarten enthalten Metadaten, die eine Palette als geeignet für einen hellen (nahezu weißen) Hintergrund identifizieren. Wenn eine Schriftart nicht über diese Metadaten verfügt, verhält sich der
lightWert wienormal.darkGibt die erste Palette im Schriftart an, die 'dark' entspricht und für die Schriftart verwendet werden soll. Einige Schriftarten enthalten Metadaten, die eine Palette als geeignet für einen dunklen (nahezu schwarzen) Hintergrund identifizieren. Wenn eine Schriftart nicht über diese Metadaten verfügt, verhält sich der Wert wie
normal.<palette-identifier>Ermöglicht es Ihnen, eigene Werte für die Schriftartenpalette zu definieren, indem Sie die@font-palette-values at-Regel verwenden. Dieser Wert wird im<dashed-ident> Format angegeben.
palette-mix()Erstellt einen neuen
font-paletteWert, indem zweifont-paletteWerte mit angegebenen Prozentsätzen und Farbinterpolationsmethoden gemischt werden.
Formale Definition
| Anfangswert | normal |
|---|---|
| Anwendbar auf | all elements and text. Auch anwendbar auf::first-letter und::first-line. |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value |
Formale Syntax
font-palette =
normal|
light|
dark|
<palette-identifier>|
<palette-mix()>
<palette-identifier> =
<dashed-ident>
<palette-mix()> =
palette-mix(<color-interpolation-method> ,[[normal|light|dark|<palette-identifier>|<palette-mix()>]&&<percentage [0,100]>?]#{2})
<color-interpolation-method> =
in[<rectangular-color-space>|<polar-color-space><hue-interpolation-method>?|<custom-color-space>]
<rectangular-color-space> =
srgb|
srgb-linear|
display-p3|
display-p3-linear|
a98-rgb|
prophoto-rgb|
rec2020|
lab|
oklab|
<xyz-space>
<polar-color-space> =
hsl|
hwb|
lch|
oklch
<hue-interpolation-method> =
[shorter|longer|increasing|decreasing]hue
<custom-color-space> =
<dashed-ident>
<xyz-space> =
xyz|
xyz-d50|
xyz-d65
Beispiele
Eine dunkle Palette spezifizieren
Dieses Beispiel ermöglicht Ihnen die Verwendung der ersten Palette, die vom Schriftartenhersteller alsdunkel markiert wurde (funktioniert am besten auf einem nahezu schwarzen Hintergrund).
@media (prefers-color-scheme: dark) { .banner { font-palette: dark; }}Zwischen zwei Paletten animieren
Dieses Beispiel zeigt, wiefont-palette Wertänderungen animiert werden können, um eine sanfte Schriftart Animation zu erzeugen.
HTML
Das HTML enthält einen einzelnen Absatz Text zur Animation:
<p>color-palette<br />animation</p>CSS
Im CSS importieren wir eineFarbfont namensNabla vonGoogle Fonts und definieren zwei benutzerdefiniertefont-palette Werte unter Verwendung der@font-palette-values at-Regel. Dann erstellen wir@keyframes, die zwischen diesen beiden Paletten animieren, und wenden diese Animation auf unseren Absatz an.
@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";@font-palette-values --blue-nabla { font-family: "Nabla"; base-palette: 2; /* this is Nabla's blue palette */}@font-palette-values --grey-nabla { font-family: "Nabla"; base-palette: 3; /* this is Nabla's grey palette */}@keyframes animate-palette { from { font-palette: --grey-nabla; } to { font-palette: --blue-nabla; }}p { font-family: "Nabla", fantasy; font-size: 5rem; margin: 0; text-align: center; animation: animate-palette 4s infinite alternate linear;}Ergebnis
Die Ausgabe sieht folgendermaßen aus:
Hinweis:Browser, die weiterhindiskretefont-palette Animation implementieren, wechseln zwischen den beiden Paletten, anstatt sanft zu animieren.
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-palette-prop |
Browser-Kompatibilität
Siehe auch
palette-mix()@font-palette-valuesbase-paletteDeskriptorfont-familyDeskriptoroverride-colorsDeskriptor