Font-variant - Propriété CSS

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 Valeurs pour font-variant.

• font-variant: normal;

  Valeur par défaut. La valeur normal initialise toutes les propriétés individuelles de font-variant à leur valeur initiale.

• font-variant: none;

  La valeur none initialise la propriété font-variant-ligatures à none et 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;
• 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.

Exemple interactif avec la propriété font-variant.

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.

Remarques :

(1) Ne supporte que les valeurs normal et small-caps.

1

Propriété
font-variant

Estimation de la prise en charge globale.

98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Caniuse

Histoire de la propriété font-variant.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant font-variant. Première définition de la propriété font-variant, acceptant seulement les valeurs normal et small-caps.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant font-variant. Ajout de la valeur inherit.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

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

  Cette spécification concerne les polices de caractères. Une police de caractères contient la représentation visuelle des caractères. Dans sa forme la plus simple il s'agit juste d'associer les codes des caractères aux formes de ceux-ci.
  Au sein d'une famille de caractère, les formes sont définies, mais peuvent varier en épaisseur du trait, inclinaison, largeur, etc. Les propriétés CSS font-... permettent de choisir l'aspect final des caractères.
  Les polices de caractères peuvent être localisées sur le poste de l'internaute ou téléchargées.

  Concernant font-variant. font-variant est maintenant une propriété résumée permettant de définir les valeurs des propriétés dont le nom commence par font-variant....
  

  21 Juillet 1997

  Document de travail.

  

  03 Octobre 2013

  Candidat à la recommandation.

  

  14 Août 2018

  Proposé à la recommandation.

  

  20 Septembre 2018

  Recommandation.

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

  Ce niveau 4 de la spécification sur les polices de caractères reprend ce qui est défini dans le niveau 3. Il ajoute la possibilité de définir ce qui se passe quand une police est longue à charger ou absente. Il ajoute également le support des polices colorées et précise de nombreux points encore mal définis dans le niveau 3.

  Concernant font-variant. Pas de changement concernant la spécification de font-variant.
  

  11 Juillet 2017

  Document de travail.

  

  

  

Au sujet des polices de caractères, voir aussi...

La spécification Module CSS - Polices de caractères regroupe tout ce qui concerne les polices de caractères, la typographie, l'exploitation des possibilités des formats de polices modernes, le téléchargement de polices, etc.

Propriétés :

Fonctions :

Directives :

Descripteurs :