font-palette - Propriété CSS
Résumé des caractéristiques de la propriété font-palette
normal | dark | lightnormalfont-palette passe d'une valeur à l'autre sans transition.Schéma syntaxique de font-palette.
font-paletteLes liens du schéma donnent accès à plus de détails
Description des termes utilisés sur le schéma :
--idest un identifiant commençant par un double tiret, et défini avec@font-palette-values.palette-mix(): reportez-vous à la définition de la fonctionpalette-mix()pour des précisions sur sa syntaxe.
Description de la propriété font-palette.
Certains formats de polices permettent la définition, non seulement de la forme des caractères (glyphes) mais également de leurs couleurs. C'est particulièrement utilisé pour les symboles, les emojis, etc. mais on trouve des polices fantaisie avec tous les caractères en couleurs. Cette fonctionnalité est assez récente et tous les navigateurs ne la prenne pas encore en charge (norme COLRv1 : Color Gradient Vector Fonts version 1). Reportez vous au tableau de compatibilité à la fin de cette page.
Cette colorisation se fait suivant une palette de couleurs définie dans le fichier de police. Certaines polices proposent plusieurs palettes.
Bien sûr il ne s'agit pas seulement de colorier les glyphes entiers (la propriété color fait cela très bien),
mais d'introduire plusieurs couleurs dans chacun des glyphes.
🃏 💳 🌂 🌄 🌈
Caractères graphiques standards
La propriété font-palette permet de définir la palette de couleurs à utiliser pour l'affichage des glyphes colorés,
soit parmi les palettes prédéfinies incluses dans le fichier de la police, soit parmi les palettes personnalisées définies
avec la directive @font-palette-values.
Syntaxes pour font-palette.
- font-palette: normal;
Le navigateur décide de la palette de couleurs à utiliser, afin d'obtenir la meilleure lisibilité possible.
- font-palette: light;
Parmi les palettes proposées dans la police, le navigateur choisit celle qui sera le plus lisible sur un fond clair. Cette information est normalement indiquée dans la police.
- font-palette: dark;
Certaines polices de caractères proposent plusieurs palettes de couleurs. Certaines peuvent être identifiées comme étant lisibles sur un fond sombre. Lorsqu'une telle palette est disponible,
font-palette: dark;demande au navigateur de l'utiliser. - font-palette: --nom-de-palette
Le navigateur choisit d'utiliser la palette indiquée. Celle-ci devra avoir été définie par la directive
@font-palette-values. Les noms des palettes personnalisées commencent forcément par un double tiret. - font-palette: palette-mix(...) ⚠
Description à venir.
- font-palette:
initial; font-palette:inherit; font-palette:revert; font-palette:revert-layer; font-palette:unset;La valeur initiale est :
normal
Simulateur.
Le simulateur ci-dessous propose le choix entre deux des palettes prédéfinies (light et dark)
et une palette personnalisée, qui a été définie par la directive @font-palette-values. Cliquez sur le bouton
pour voir la définition de cette palette nommée --demo1.
Prise en charge par les navigateurs (compatibilité).
La gestion des polices colorées avec palettes semble aujourd'hui bien prise en charge, mais rappelons que cette fonctionnalité n'est disponible que sur certaines polices de caractères.
COLRv1). Cela commence à être correct sur la plupart des navigateurs
font-palette, qui commence, elle aussi, à être correcte.
font-paletteNavigateurs 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
Oméra mini
Voir aussi, dans le même module de standardisation que font-palette.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-palette fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.