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.
The base-palette CSS descriptor is used to specify the name or index of a pre-defined palette to be used for creating a new palette. If the specified base-palette does not exist, then the palette defined at index 0 will be used.
Syntax
@font-palette-values --one {
base-palette: 1;
}
The base-palette descriptor is specified using a zero-based index of the font-maker created palettes.
Values
<index>-
Specifies the index of the pre-defined palette to use.
Formal definition
Value not found in DB!Formal syntax
base-palette =
light |
dark |
<integer [0,∞]>
Examples
Changing the default palette in a font
Using the Rocher Color Font, this example shows two instances of switching the default palette in the font to an alternate palette created by the font-maker.
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
@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;
}
Result
[画像:Example showing 3 different base-palettes of Rocher color font]
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # base-palette-desc |
Browser compatibility
Enable JavaScript to view this browser compatibility table.
See also
@font-palette-valuesfont-familydescriptoroverride-colorsdescriptorfont-palettepropertyCSSFontPaletteValuesRule.basePalette