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 erlaubt die Spezifikation einer der vielen Paletten, die in einer Farb-Schriftart enthalten sind, die ein User-Agent 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 bei der Farbgebung einer Schriftart. Die color-Eigenschaft wird eine Schriftarten-Palette nicht überschreiben, selbst wenn sie mit !important angegeben wird.

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 Schriftart-Hersteller festgelegt), die für die Schriftart verwendet werden soll. Mit dieser Einstellung wird die Palette in der Schriftart an Index 0 gerendert.
light: Gibt die erste Palette in der Schriftart an, die als 'light' gekennzeichnet ist und für die Schriftart verwendet werden soll. Einige Schriften enthalten Metadaten, die eine Palette als anwendbar für einen hellen (nahezu weißen) Hintergrund identifizieren. Wenn eine Schrift nicht über diese Metadaten verfügt, verhält sich der light-Wert wie normal.
dark: Gibt die erste Palette in der Schriftart an, die als 'dark' gekennzeichnet ist und für die Schriftart verwendet werden soll. Einige Schriften enthalten Metadaten, die eine Palette als anwendbar für einen dunklen (nahezu schwarzen) Hintergrund identifizieren. Wenn eine Schrift nicht über diese Metadaten verfügt, verhält sich der Wert wie normal.
<palette-identifier>: Ermöglicht es Ihnen, eigene Werte für die Schriftarten-Palette zu spezifizieren, indem Sie die @font-palette-values Regel verwenden. Dieser Wert wird im <dashed-ident>-Format angegeben.
palette-mix(): Erstellt einen neuen font-palette-Wert, indem zwei font-palette-Werte durch festgelegte 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-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 spezifizieren

Dieses Beispiel erlaubt Ihnen, die erste Palette zu verwenden, die vom Schriftarten-Ersteller als dark (am besten auf einem fast schwarzen Hintergrund) markiert wurde.

css

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

Zwischen zwei Paletten animieren

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

HTML

Das HTML enthält einen einzelnen Absatz von animiertem Text:

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 unter Verwendung der @font-palette-values-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

Das Ergebnis sieht folgendermaßen aus:

Hinweis: Browser, die weiterhin diskrete font-palette-Animationen implementieren, werden zwischen den beiden Paletten wechseln, anstatt 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