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.

Die font-palette-Eigenschaft von CSS ermöglicht es, eine der vielen Paletten anzugeben, die in einer Farbfont 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: Eine font-palette-Palette hat Vorrang, wenn eine Schriftart eingefärbt wird. Die color-Eigenschaft wird eine Schriftartenpalette nicht überschreiben, selbst wenn sie mit !important festgelegt 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 an, dass die Standardfarbpalette oder die standardmäßige Glyphenfärbung (vom Schriftartenhersteller festgelegt) für die Schriftart verwendet werden soll. Mit dieser Einstellung wird die Palette im Font an Index 0 gerendert.
light: Gibt an, dass die erste Palette im Font, die als 'light' gekennzeichnet ist, für die Schriftart verwendet werden soll. Einige Fonts enthalten Metadaten, die eine Palette als geeignet für einen hellen (fast weißen) Hintergrund identifizieren. Wenn ein Font diese Metadaten nicht hat, verhält sich der Wert light wie normal.
dark: Gibt an, dass die erste Palette im Font, die als 'dark' gekennzeichnet ist, für die Schriftart verwendet werden soll. Einige Fonts enthalten Metadaten, die eine Palette als geeignet für einen dunklen (fast schwarzen) Hintergrund identifizieren. Wenn ein Font diese Metadaten nicht hat, verhält sich der Wert wie normal.
<palette-identifier>: Ermöglicht es, eigene Werte für die Schriftpalette anzugeben, indem die @font-palette-values At-Regel verwendet wird. Dieser Wert wird im <dashed-ident> Format angegeben.
palette-mix(): Erstellt einen neuen font-palette-Wert, indem zwei font-palette-Werte durch festgelegte Prozentsätze und Farbeninterpolationsmethoden miteinander vermischt werden.

Formelle 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

Formelle 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-space>   

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

Beispiele

Eine dunkle Palette spezifizieren

Dieses Beispiel ermöglicht es, die erste vom Schriftartenhersteller als dark markierte Palette zu verwenden (funktioniert am besten auf einem fast schwarzen Hintergrund).

css

@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

Animieren zwischen zwei Paletten

Dieses Beispiel veranschaulicht, wie font-palette-Wertänderungen animiert werden können, um eine flüssige Schriftanimation zu erstellen.

HTML

Das HTML enthält einen einzelnen Absatz von Text, der animiert werden soll:

html

<p>color-palette<br />animation</p>

CSS

Im CSS importieren wir eine Farbfont namens Nabla von Google Fonts und definieren zwei benutzerdefinierte font-palette-Werte mit der @font-palette-values At-Regel. Dann erstellen wir @keyframes, die zwischen diesen beiden Paletten animieren, und wenden diese Animation auf unseren Absatz an.

css

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

Hinweis: Browser, die noch discrete font-palette-Animation implementieren, werden zwischen den beiden Paletten umschalten, anstatt flüssig zu animieren.

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-palette-prop

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden