Font-variant - Propriété CSS
Résumé des caractéristiques de la propriété font-variant
normal | none | small-caps | all-small-caps | petite-caps | all-petite-caps | titling-caps | unicasenormalfont-variant passe d'une valeur à l'autre sans transition.Description de la propriété font-variant.
Initialement, en CSS2, la propriété font-variant définissait simplement la capitalisation
des caractères (écriture en petites capitales par exemple).
Mais cela a beaucoup évolué : en CSS3 font-variant définit de nombreux paramètres typographiques avancés comme
la ligature ou la substitution de caractères.
C'est maintenant une propriété résumée qui correspond aux propriétés suivantes :
font-variant-alternates: gestion des glyphes alternatifs.font-variant-caps: capitalisation des caractères.font-variant-east-asian: règle de substitution des caractères pour les langues telles que le chinois ou le japonais.font-variant-emoji: emoticons.font-variant-ligatures: ligatures des lettres successives.font-variant-numeric: affichage des chiffres.font-variant-position: mise en exposant ou en indice de caractères.
Toutes les valeurs ne sont pas forcément spécifiées mais celles qui ne le sont pas seront remises à leur valeur initiale. Ignorer une valeur ne la laisse donc pas inchangée.
font-variant et les propriétés dérivées ci-dessus fonctionnent avec les polices du type OTF ou WOFF.
Exemples de syntaxes pour font-variant.
- font-variant: normal;
Valeur par défaut. La valeur
normalinitialise toutes les propriétés individuelles defont-variantà leur valeur initiale. - font-variant: none;
La valeur
noneinitialise la propriétéfont-variant-ligaturesànoneet toutes les autres propriétés individuelles à leur valeur initiale. - font-variant: small-caps oldstyle-nums common-ligatures;
Exemple d'une syntaxe définissant la valeur de plusieurs propriétés individuelles. Cette écriture est équivalente à :
fontVariantAlternates: initial; font-variant-caps: small-caps; font-variant-east-asian: initial; font-variant-emoji: initial; font-variant-ligature: common-ligatures; font-variant-numeric: oldstyle-nums; font-variant-position: initial;
Valeurs communes à toutes les propriétés :
font-variant: initial (normal)
font-variant: inherit
font-variant: revert
font-variant: revertLayer
font-variant: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Animation de font-variant et des propriétés individuelles.
Toutes les propriétés relatives à font-variant peuvent être animées. Reportez-vous à la page de chacune de
ces propriétés pour voir des exemples d'animations.
Simulateur.
Le simulateur ne propose que les valeurs déjà définies en CSS2, qui sont en principe bien reconnues par tous les navigateurs,
et utilisables avec toutes les polices..
Mais toutes les valeurs relatives aux propriétés font-variant... individuelles sont également acceptées par la
propriété résumée font-variant. Reportez-vous à ces différentes propriétés pour plus de précisions et d'autres simulateurs.
Prise en charge et compatibilité des navigateurs.
Les anciennes valeurs de font-variant (définies en CSS2) sont bien reconnues par tous les navigateurs actuels.
Il s'agit en gros des valeurs correspondant à font-variant-caps
(normal,small-caps, all-small-caps, etc).
Par contre les nouvelles possibilités définies en CSS3 sont bien moins reconnues.
Reportez-vous aux pages des propriétés individuelles pour plus de détails :
- Utilisation des formes alternatives des caractères (formes ornées, stylisées, etc) avec
font-variant-alternates. - Gestion d'effets spécifiques aux langues CJK
(propriété
font-variant-east-asian). - Présentations spécifiques aux nombres (fractions par exemple) :
font-variant-numeric. - Gestion des exposants et des indices avec
font-variant-position. - Activation ou désactivation des ligatures avec
font-variant-ligatures. - Et, encore plus récemment, la gestion des possibilités des polices avec emoji (
font-variant-emoji).
De plus, toutes ces propriétés utilisant les possibilités des polices OTF (OpenType Font), elles sont très dépendantes de la police de caractères utilisée. Peu de polices proposent toutes les possibilités.
font-variantNavigateurs 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
Historique
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Première définition de la propriétéfont-variant, acceptant seulement les valeursnormaletsmall-caps.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ajout de la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Polices de caractères - Niveau 3
font-variantest maintenant une propriété résumée permettant de définir les valeurs des propriétés dont le nom commence parfont-variant....21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.14 Août 2018Proposé à la recommandation.20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Pas de changement concernant la spécification defont-variant.11 Juillet 2017Document de travail.
Voir aussi, dans le même module de standardisation que font-variant.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-variant 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.