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.

* Some parts of this feature may have varying levels of support.

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

css

/* 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 wie normal.
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 zwei font-palette Werte nach 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-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).

css

@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:

html

<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.

css

@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