base-palette
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis 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
Chargement…
Voir aussi
@font-palette-values- Le descripteur
font-family - Le descripteur
override-colors - La propriété
font-palette CSSFontPaletteValuesRule.basePalette