font-palette

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.

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  

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;
  }
}

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:

• palette-mix()
• @font-palette-values
• base-palette Descriptor
• font-family Descriptor
• override-colors Descriptor