base-palette

Baseline 2022

Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Der base-palette CSS-Deskriptor wird verwendet, um den Namen oder Index einer vordefinierten Palette anzugeben, die für die Erstellung einer neuen Palette verwendet werden soll. Wenn die angegebene base-palette nicht existiert, wird die bei Index 0 definierte Palette verwendet.

Syntax

css

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

Der base-palette-Deskriptor wird mit einem Null-basierten Index der vom Schriftgestalter erstellten Paletten angegeben.

Werte

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

Formale Definition

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

Formale Syntax

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

Beispiele

Ändern der Standardpalette in einer Schriftart

Dieses Beispiel verwendet die Rocher Color Font, um zwei Instanzen zu zeigen, wie die Standardpalette in der Schriftart durch eine vom Schriftgestalter erstellte alternative Palette ersetzt wird.

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";
}

@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 zeigt 3 verschiedene Basis-Paletten der Rocher-Farbfont

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser