@font-palette-values - Directive CSS

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 utilisables. 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-palette doit obligatoirement commencer par un double tiret, comme tous les identifiants personnalisés en CSS.
  

  base-palette indique 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-palette applique 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-colors donne accès à la modification individuelle des couleurs d'une palette. Notre exemple modifie les couleurs numéro 5 et 6 de la palette numéro 1.

  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.

1

Spécification
COLRv1

2

Directive
@font-palette-values

Estimation de la prise en charge globale.

78%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la directive @font-palette-values.

• Module CSS - Polices de caractères - Niveau 4

  Introduction de la directive @font-palette-values.
  

  11 Juillet 2017

  Document 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.

Propriétés :

Fonctions :

Directives :

Descripteurs :