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

Der base-palette CSS-Deskriptor wird verwendet, um den Namen oder Index einer vordefinierten Palette anzugeben, die zur Erstellung einer neuen Palette verwendet werden soll. Wenn die angegebene base-palette nicht existiert, wird die Palette verwendet, die am Index 0 definiert ist.

Syntax

css

@font-palette-values --one {
  base-palette: 1;
}

Der base-palette-Deskriptor wird mit einem nullbasierten Index der vom Schrifthersteller erstellten Paletten angegeben.

Werte

<index>: Gibt den Index der zu verwendenden vordefinierten Palette an.

Formale Definition

Zugehörige @-Regel	`@font-palette-values`
Anfangswert	`n/a (required)`
Berechneter Wert	wie angegeben

Formale Syntax

base-palette = 
  light            |
  dark             |
  <integer [0,∞]>

Beispiele

Ändern der Standardpalette in einer Schriftart

Dieses Beispiel zeigt zwei Instanzen des Wechsels der Standardpalette in der Schriftart zu einer alternativen vom Schrifthersteller erstellten Palette mit der Rocher Color Font.

HTML

html

<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>

CSS

css

@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}

h2 {
  font-family: "Rocher", fantasy;
}

@font-palette-values --two {
  font-family: "Rocher";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Rocher";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

Ergebnis

Beispiel, das 3 verschiedene Basis-Paletten der Rocher-Farbschrift zeigt

Spezifikationen

Specification
CSS Fonts Module Level 4 # base-palette-desc