CSS - Propriété font-variant

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). 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é raccourcie qui correspond aux propriétés suivantes :

• font-variant-caps : capitalisation des caractères.
• font-variant-numeric : affichage des chiffres.
• font-variant-alternates : gestion des glyphes alternatifs.
• font-variant-ligatures : ligatures des lettres successives.
• font-variant-east-asian : règle de substitution des caractères pour les langues telles que le chinois ou le japonais.

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.

Syntaxes 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é Object à 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 à :

  font-variant-caps: small-caps; font-variant-numeric: oldstyle-nums; font-variant-ligature: common-ligatures;
• font-variant: initial;

  La valeur initiale est normal.

• font-variant: unset; font-variant: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur ci-dessous vous donne une idées des possibilités typographiques de CSS et des polices OTF/WOFF. Pour une présentation plus complète, reportez-vous aux propriétés spécifiques de la famille font-variant.

Prise en charge et compatibilité des navigateurs.

Les anciennes valeurs de font-variant (normal,small-caps) sont bien reconnues par tous les navigateurs actuels.

Les possibilités liées aux polices OTF (OpenType Font) sont très liées à la police de caractères utilisée. Peu de polices proposent toutes les possibilités.

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

Il en et de même pour les affichages de nombres particuliers tels que les fractions.

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

Voir aussi...

Polices et caractères - Propriétés.

• font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
• font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
• font-family : Définit le nom de la police de caractères.
• font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
• font-kerning : Ajustement du crénage entre caractères.
• font-size : Ajuste la taille des caractères.
• font-size-adjust : Définition du coefficient d'aspect de la police.
• font-stretch : Modifie l'étirement ou la compression des caractères.
• font-style : Sélectionne les styles italique ou oblique de la police de caractères.
• font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
• font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
• font-variant-caps : Applique une capitalisation des caractères.
• font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
• font-variant-ligatures : Active ou désactive la ligature des caractères.
• font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
• font-weight : Sélectionne une graisse pour les caractères.
• text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
• text-decoration-color : Définit la couleur du trait de décoration.
• text-decoration-line : Type de décoration : souligné, barré, etc.
• text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
• text-shadow : Ombrage du texte.
• text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

• @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
• @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
• @font-feature-values : Définit les variantes typographiques à utiliser.