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 novembre 2022.
Le descripteur CSS base-palette de la règle @ @font-palette-values est utilisé pour spécifier le nom ou l'index d'une palette prédéfinie à utiliser pour créer une nouvelle palette. Si la base-palette indiquée n'existe pas, alors la palette définie à l'index 0 sera utilisée.
Syntaxe
@font-palette-values --one {
base-palette: 1;
}
Le descripteur base-palette se spécifie avec un index basé sur zéro des palettes créées par le·la créateur·ice de la police.
Valeurs
<index>-
Définit l'index de la palette prédéfinie à utiliser.
Définition formelle
| En lien avec les règles @ | @font-palette-values |
|---|---|
| Valeur initiale | n/a (required) |
| Valeur calculée | comme spécifié |
Syntaxe formelle
base-palette =
light |
dark |
<integer [0,∞]>
Exemples
Changer la palette par défaut d'une police
En utilisant la police couleur Rocher (angl.), cet exemple montre deux cas où la palette par défaut de la police est remplacée par une palette alternative créée par le·la créateur·ice de la police.
HTML
<h2>palette de base par défaut</h2>
<h2 class="two">palette de base à l'index 2</h2>
<h2 class="five">palette de base à l'index 5</h2>
CSS
@font-face {
font-family: "Rocher";
src: url("[chemin-vers-la-police]/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;
}
Résultat
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # base-palette-desc |
Compatibilité des navigateurs
Loading…
Voir aussi
@font-palette-values- Le descripteur
font-family - Le descripteur
override-colors - La propriété
font-palette CSSFontPaletteValuesRule.basePalette