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 CSS Eigenschaft ermöglicht es, eine der vielen Paletten anzugeben, die in einer Farbfont enthalten sind, die ein Benutzeragent 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 bei der Farbgebung einer Schrift. Die color Eigenschaft wird eine Schriftpaletteneinstellung nicht überschreiben, selbst wenn sie mit !important angegeben ist.

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 Standardglyphenfärbung an (festgelegt vom Schriftgestalter), die für die Schrift verwendet werden soll. Mit dieser Einstellung wird die Palette im Font an Index 0 gerendert.
light: Gibt die erste Palette im Font an, die mit 'light' übereinstimmt und für die Schrift verwendet werden soll. Einige Fonts enthalten Metadaten, die eine Palette als anwendbar für einen hellen (nahezu weißen) Hintergrund kennzeichnen. Wenn ein Font diese Metadaten nicht hat, verhält sich der light Wert wie normal.
dark: Gibt die erste Palette im Font an, die mit 'dark' übereinstimmt und für die Schrift verwendet werden soll. Einige Fonts enthalten Metadaten, die eine Palette als anwendbar für einen dunklen (nahezu schwarzen) Hintergrund kennzeichnen. Wenn ein Font diese Metadaten nicht hat, verhält sich der Wert wie normal.
<palette-identifier>: Ermöglicht es Ihnen, eigene Werte für die Schriftpalette festzulegen, indem Sie die @font-palette-values At-Regel verwenden. Dieser Wert wird im <dashed-ident> Format angegeben.
palette-mix(): Erstellt einen neuen font-palette Wert, indem zwei font-palette Werte 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-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 angeben

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

css

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

Animation zwischen zwei Paletten

Dieses Beispiel zeigt, wie man font-palette Wertänderungen animiert, um eine flüssige Schriftenanimation zu erstellen.

HTML

Das HTML enthält einen einzelnen Absatz Text zur Animation:

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 mithilfe 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 folgendermaßen aus:

Hinweis: Browser, die immer 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