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 auszuwählen, die in einer Farb-Schriftart enthalten sind. Diese kann von einem Benutzeragenten für die Schriftart verwendet werden. 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 hat Vorrang, wenn es darum geht, eine Schriftart einzufärben. Die color Eigenschaft wird eine Schriftartenpalette nicht überschreiben, selbst wenn sie mit !important spezifiziert wurde.

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 Standardglyphfarbgebung an (vom Schriftartenhersteller festgelegt), die für die Schriftart verwendet werden soll. Mit dieser Einstellung wird die Palette in der Schrift an Index 0 gerendert.
light: Gibt die erste Palette in der Schrift an, die 'light' übereinstimmt und für die Schrift verwendet werden soll. Einige Schriftarten enthalten Metadaten, die eine Palette als anwendbar für einen hellen (nahezu weißen) Hintergrund identifizieren. Wenn eine Schriftart diese Metadaten nicht hat, verhält sich der light-Wert wie normal.
dark: Gibt die erste Palette in der Schrift an, die 'dark' übereinstimmt und für die Schrift verwendet werden soll. Einige Schriftarten enthalten Metadaten, die eine Palette als anwendbar für einen dunklen (nahezu schwarzen) Hintergrund identifizieren. Wenn eine Schriftart diese Metadaten nicht hat, verhält sich der Wert wie normal.
<palette-identifier>: Ermöglicht es Ihnen, eigene Werte für die Schriftartenpalette zu spezifizieren, indem Sie die @font-palette-values At-Regel verwenden. Dieser Wert wird im <dashed-ident> Format spezifiziert.
palette-mix(): Erstellt einen neuen font-palette-Wert, indem zwei font-palette-Werte durch angegebene Prozentsätze und Farbmischmethoden kombiniert 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 Ihnen, die erste Palette zu verwenden, die vom Schriftartenhersteller als dark (funktioniert am besten auf einem fast schwarzen Hintergrund) markiert wurde.

css

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

Animation zwischen zwei Paletten

Dieses Beispiel zeigt, wie font-palette-Wertänderungen animiert werden können, um eine sanfte Schriftanimation zu erstellen.

HTML

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

html

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

CSS

Im CSS importieren wir eine Farb-Schriftart namens Nabla von Google Fonts und definieren zwei benutzerdefinierte font-palette-Werte mit der @font-palette-values At-Regel. Wir erstellen dann @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 diskrete font-palette Animationen implementieren, werden zwischen den beiden Paletten umschalten, anstatt sie sanft 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