@font-palette-values
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.
La règle @ CSS @font-palette-values permet de personnaliser les valeurs par défaut de la palette de police créée par le·la créateur·ice de la police.
Syntaxe
@font-palette-values --identifier {
font-family: Bixa;
}
.my-class {
font-palette: --identifier;
}
La valeur <dashed-ident> est un identifiant défini par l'utilisateur·rice qui, bien qu'il ressemble à une propriété personnalisée CSS, se comporte différemment et n'est pas utilisé dans une fonction CSS var().
Descripteurs
base-palette-
Définit le nom ou l'index de la palette de base, créée par le·la créateur·ice de la police, à utiliser.
font-family-
Définit le nom de la famille de police à laquelle cette palette peut être appliquée. Un nom de
font-familyest requis pour que la règle@font-palette-valuessoit valide. override-colors-
Définit les couleurs de la palette de base à remplacer.
Syntaxe formelle
@font-palette-values =
@font-palette-values <dashed-ident> { <declaration-list> }
Exemples
>Remplacer les couleurs d'une palette existante
Cet exemple montre comment modifier certaines ou toutes les couleurs d'une police couleur.
HTML
<p>couleurs par défaut</p>
<p class="alternate">couleurs alternatives</p>
CSS
@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
p {
font-family: "Bungee Spice", fantasy;
font-size: 2rem;
}
@font-palette-values --Alternate {
font-family: "Bungee Spice";
override-colors:
0 #00ffbb,
1 #007744;
}
.alternate {
font-palette: --Alternate;
}
Résultat
Lorsque vous remplacez les couleurs de la palette normale ou de la palette de base à l'index 0, il n'est pas nécessaire de déclarer quelle palette de base utiliser. Cela ne doit être fait que si vous remplacez une autre palette de base. Si vous remplacez toutes les couleurs, il n'est pas non plus nécessaire de spécifier la palette de base à utiliser.
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4> # at-ruledef-font-palette-values> |
Compatibilité des navigateurs
Chargement…
Voir aussi
- La propriété
font-palette - Le descripteur
font-family - Le descripteur
base-palette - Le descripteur
override-colors CSSFontPaletteValuesRule