@font-palette-values - Directive CSS
Résumé des caractéristiques de la directive @font-palette-values
Description de la directive @font-palette-values.
Certaines polices de caractères acceptent plusieurs couleurs pour chaque symbole ou même des dégradés. Elles sont dites "Color fonts" ou "Chromatic fonts", ou polices chromatiques en français, par opposition aux polices classiques qui sont dites monochromatiques. Cette technologie, nommée COLRv1 (Color Gradient Vector Fonts version 1), est relativement récente mais commence à être bien acceptée par les navigateurs courants.
Voici trois polices chromatiques parmi celles qui sont disponibles sur Google Fonts :
Une ou plusieurs palette de couleurs sont déjà incluses dans le fichier de police lui-même.
La directive @font-palette-values permet de sélectionner celle qui sera utilisée.
La police Nabla comporte 5 palettes prédéfinies, numérotées de 1 à 5 :
A l'intérieur même d'une palette prédéfinie, il est possible avec @font-palette-values de changer une ou plusieurs des couleurs.
Exemple à partir de la palette numéro 4 :
@font-palette-values ne fait que définir la palette ou les couleurs à utiliser. Ces paramètres doivent ensuite être appliqués
avec la propriété font-palette.
Syntaxes pour @font-palette-values.
- @font-palette-values: --nom-de-la-palette { font-family:'Nabla'; base-palette: 1; }
Cette syntaxe définit une palette à utiliser pour la police de caractères
Nabla. Le--nom-de-la-palettedoit obligatoirement commencer par un double tiret, comme tous les identifiants personnalisés en CSS.
base-paletteindique la palette choisie. Le nombre de palettes disponibles dépend de la police. Les palettes peuvent être identifiées par un numéro ou par un nom, cela dépend aussi de la police.La propriété
font-paletteapplique ensuite cette déclaration avec la syntaxe habituelle :#id { font-family: 'Nabla'; font-palette: --nom-de-la-palette; } - @font-palette-values: --nom-de-la-palette { font-family:'Nabla'; base-palette: 1; override-colors: 5 blue, 6 green; }
Le descripteur
override-colorsdonne accès à la modification individuelle des couleurs d'une palette. Notre exemple modifie les couleurs numéro5et6de la palette numéro1.Le nombre de couleurs disponibles dans chaque palette est lui aussi dépendant de la police choisie. La référence à un numéro de couleur inexistant dans la palette est sans effet mais n'invalide pas la syntaxe.
Exemples pour @font-palette-values.
La police de caractères Bungee Spice est chromatique. Il est donc possible de modifier les couleurs qui composent
ses caractères avec @font-palette-values.
Deux variantes ont été définies et sont ensuite appliquées à chacune des lignes de l'exemple ci-dessous.
Prise en charge par les navigateurs (compatibilité).
La première colonne du tableau de compatibilité montre la prise en charge du protocole COLRv1 concernant
les polices de caractères chromatiques.
La deuxième colonne est plus spécifique à la directive CSS @font-palette-values.
COLRv1
@font-palette-valuesNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Évolution de la directive @font-palette-values.
-
Module CSS - Polices de caractères - Niveau 4
Introduction de la directive@font-palette-values.
11 Juillet 2017Document de travail.
Voir aussi, au sujet des polices de caractères.
La directive @font-palette-values est présentée dans la spécification "Module CSS - Polices de caractères" (CSS Fonts Module).
Ces autres définitions sont également décrites dans ce même module.