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

Gibt den Index der zu verwendenden vordefinierten Palette an.

Formale Definition

Zugehörige @-Regel@font-palette-values
Anfangswertn/a (required)
Berechneter Wertwie angegeben

Formale Syntax

base-palette = 
  light            |
  dark             |

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
default base-palette


base-palette at index 2


base-palette at index 5

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

Siehe auch