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

Die font-palette CSS Eigenschaft ermöglicht es, eine der vielen Paletten aus einer Farbschriftart anzugeben, 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-Regel verwenden.

Hinweis: Eine font-palette-Palette hat Vorrang, wenn es darum geht, eine Schrift zu färben. Die color Eigenschaft wird eine Schriftart-Palette 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 standardmäßige Glyphenfärbung (festgelegt durch den Schriftgestalter) an, die für die Schriftart verwendet werden soll. Mit dieser Einstellung wird die Palette im Font bei Index 0 gerendert.
light: Gibt die erste Palette in der Schrift an, die mit 'light' übereinstimmt und für die Schrift verwendet werden soll. Einige Schriftarten enthalten Metadaten, die eine Palette als anwendbar für einen hellen (nahe weiß) Hintergrund identifizieren. Wenn eine Schriftart diese Metadaten nicht enthält, verhält sich der light-Wert wie normal.
dark: Gibt die erste Palette in der Schrift an, die mit 'dark' übereinstimmt und für die Schrift verwendet werden soll. Einige Schriftarten enthalten Metadaten, die eine Palette als anwendbar für einen dunklen (nahe schwarz) Hintergrund identifizieren. Wenn eine Schriftart diese Metadaten nicht enthält, verhält sich der Wert wie normal.
<palette-identifier>: Ermöglicht das Angeben eigener Werte für die Schriftart-Palette unter Verwendung der @font-palette-values Regel. Dieser Wert wird im Format <dashed-ident> angegeben.
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 Palette zu verwenden, die vom Schriftgestalter als dark (funktioniert am besten auf einem nahezu schwarzen Hintergrund) markiert wurde.

css

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

Zwischen zwei Paletten animieren

Dieses Beispiel zeigt, wie font-palette Wertänderungen animiert werden, um eine weiche Schriftanimation zu erstellen.

HTML

Der HTML-Code enthält einen einzelnen Absatz Text zur Animation:

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, indem wir die @font-palette-values Regel verwenden. 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 eine diskrete font-palette Animation implementieren, werden zwischen den beiden Paletten umschalten, anstatt sanft 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