`font-palette` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2022 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die font-palette CSS Eigenschaft ermöglicht es, eine der vielen in einer Farbschriftart enthaltenen Paletten anzugeben, die ein Benutzeragent für die Schrift verwenden kann. Benutzer können die Werte in einer Palette auch ü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 spezifiziert 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

Diese Eigenschaft wird als einzelner Wert aus der folgenden Liste angegeben:

normal: Gibt die Standardfarbpalette oder die Standard-Glyphenfärbung (vom Schrifthersteller festgelegt) an, die für die Schrift verwendet werden soll. Mit dieser Einstellung wird die Palette in der Schriftart an Index 0 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 geeignet für einen hellen (nahezu weißen) Hintergrund kennzeichnen. 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 geeignet für einen dunklen (nahezu schwarzen) Hintergrund kennzeichnen. Wenn eine Schrift diese Metadaten nicht hat, verhält sich der Wert wie normal.
<dashed-ident>: Ermöglicht es Ihnen, eigene Werte für die Schriftpalette anzugeben, indem Sie den <palette-identifier> einer @font-palette-values At-Regel verwenden.
palette-mix(): Erstellt einen neuen font-palette Wert, indem zwei font-palette Werte durch angegebene Prozentsätze 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-identifier> = 
  <dashed-ident>  

<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 Ihnen, die erste vom Schrifthersteller als dark markierte Palette zu verwenden (funktioniert am besten auf einem nahezu schwarzen Hintergrund).

css

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

Zwischen zwei Paletten animieren

Dieses Beispiel zeigt, wie die Werte von font-palette animiert werden, um eine fließende Schriftanimation zu erzeugen.

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 Farbschriftart 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 noch diskrete font-palette Animation implementieren, werden zwischen den beiden Paletten umschalten, anstatt fließend zu animieren.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

font-palette CSS property

HTML

CSS

Ergebnis

Help improve MDN

`font-palette` CSS property