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 de la syntaxe 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.
Valeurs 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.
Valeurs communes à toutes les propriétés :
font-palette: initial (normal)
font-palette: inherit
font-palette: revert
font-palette: revertLayer
font-palette: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Exemple interactif avec la propriété font-palette.
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.
Compatibilité des navigateurs avec font-palette.
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.
font-palette, choisir la palette de couleurs pour les polices de caractères qui en comportent plusieurs.COLRv1
font-paletteNavigateurs 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
Histoire de la propriété font-palette.
-
Module CSS - Polices de caractères - Niveau 4
Première présentation de la propriétéfont-palette.
11 Juillet 2017Document de travail.
Voir aussi, au sujet des polices de caractères.
Les propriétés et directives concernant les polices de caractères sont nombreuses. Leur définition est regroupée dans le module CSS Fonts Module. Vous trouvez les définitions suivantes dans ce module :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.