font-palette
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
CSS Eigenschaft ermöglicht es, eine der vielen Paletten zu spezifizieren, die in einer Farbschrift enthalten sind, die ein Nutzeragent für die Schrift 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: Eine font-palette
Palette hat Vorrang beim Färben einer Schrift. Die color
Eigenschaft wird eine Schriftpalette 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
normal
-
Gibt die Standardfarbpalette oder die Standardglyphenfarbgebung an (vom Schriftgestalter festgelegt), die für die Schrift verwendet werden soll. Mit dieser Einstellung wird die im Font an Index 0 befindliche Palette gerendert.
light
-
Gibt die erste Palette in der Schrift an, die 'light' entspricht und für die Schrift verwendet werden soll. Einige Schriften enthalten Metadaten, die eine Palette als anwendbar für einen hellen (fast weißen) Hintergrund identifizieren. Wenn eine Schrift diese Metadaten nicht hat, verhält sich der
light
Wert wienormal
. dark
-
Gibt die erste Palette in der Schrift an, die 'dark' entspricht und für die Schrift verwendet werden soll. Einige Schriften enthalten Metadaten, die eine Palette als anwendbar für einen dunklen (fast schwarzen) Hintergrund identifizieren. Wenn eine Schrift diese Metadaten nicht hat, verhält sich der Wert wie
normal
. <palette-identifier>
-
Ermöglicht es Ihnen, eigene Werte für die Schriftpalette mithilfe der @font-palette-values At-Regel anzugeben. Dieser Wert wird im Format <dashed-ident> angegeben.
palette-mix()
-
Erstellt einen neuen
font-palette
Wert, indem zweifont-palette
Werte nach angegebenen Prozentsätzen und Farbinterpolationsmethoden gemischt werden.
Formale Definition
Initialer Wert | 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-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>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
Beispiele
Spezifizieren einer dunklen Palette
Dieses Beispiel erlaubt es Ihnen, die erste Palette zu verwenden, die vom Schriftgestalter als dunkel markiert wurde (funktioniert am besten auf einem fast schwarzen Hintergrund).
@media (prefers-color-scheme: dark) {
.banner {
font-palette: dark;
}
}
Animation zwischen zwei Paletten
Dieses Beispiel zeigt, wie font-palette
Wertänderungen animiert werden, um eine fließende Schriftanimation zu erstellen.
HTML
Das HTML enthält einen einzelnen Absatz mit Text zur Animation:
<p>color-palette<br />animation</p>
CSS
Im CSS importieren wir eine Farbschrift namens Nabla von Google Fonts und definieren zwei benutzerdefinierte font-palette
Werte mithilfe der @font-palette-values
At-Regel. Wir erstellen dann @keyframes
, die zwischen diesen beiden Paletten animieren, und wenden diese Animation auf unseren Absatz an.
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");
@font-palette-values --blueNabla {
font-family: Nabla;
base-palette: 2; /* this is Nabla's blue palette */
}
@font-palette-values --greyNabla {
font-family: Nabla;
base-palette: 3; /* this is Nabla's grey palette */
}
@keyframes animate-palette {
from {
font-palette: --greyNabla;
}
to {
font-palette: --blueNabla;
}
}
p {
font-family: "Nabla";
font-size: 5rem;
margin: 0;
text-align: center;
animation: animate-palette 4s infinite alternate linear;
}
Ergebnis
Die Ausgabe sieht so aus:
Hinweis: Browser, die noch diskrete font-palette
Animation implementieren, werden zwischen den beiden Paletten umschalten, anstatt sie fließend zu animieren.
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-palette-prop |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
palette-mix()
@font-palette-values
base-palette
Descriptorfont-family
Descriptoroverride-colors
Descriptor