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, die in einer Farbschrift enthalten sind, auszuwählen, 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 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

normal: Gibt die Standardfarbpalette oder die Standardglyphenfärbung an (vom Font-Designer festgelegt), 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 zu 'light' passt, um für die Schrift verwendet zu werden. Einige Schriften enthalten Metadaten, die eine Palette als anwendbar für einen hellen (nahezu weißen) Hintergrund identifizieren. Wenn ein Font diese Metadaten nicht hat, verhält sich der Wert light wie normal.
dark: Gibt die erste Palette im Font an, die zu 'dark' passt, um für die Schrift verwendet zu werden. Einige Schriften enthalten Metadaten, die eine Palette als anwendbar für einen dunklen (nahezu 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 über die @font-palette-values At-Regel zu definieren. Dieser Wert wird im <dashed-ident> Format angegeben.
palette-mix(): Erstellt einen neuen font-palette Wert, indem zwei font-palette Werte nach 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 Palette zu verwenden, die als dark (funktioniert am besten auf einem nahezu schwarzen Hintergrund) vom Schrift-Designer markiert wurde.

css

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

Animation zwischen zwei Paletten

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

HTML

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

html

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

CSS

Im CSS importieren wir eine Farbschrift 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 so aus:

Hinweis: Browser, die noch discrete font-palette Animation implementieren, wechseln zwischen den beiden Paletten, anstatt sie nahtlos 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