La propriété font-variant est une propriété raccourcie représentant les propriétés : font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures et font-variant-east-asian. On peut aussi utiliser les valeurs de la propriété font-variant définies avec CSS Level 2 (normal ou small-caps), en utilisant la propriété raccourcie font.

Syntaxe

font-variant: small-caps;
font-variant: common-ligatures small-caps;

/* Valeurs globales */
font-variant: inherit;
font-variant: initial;
font-variant: unset;

Valeurs

normal
Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de normal. Ces propriétés sont font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, et font-variant-east-asian.
none
Définit la valeur de font-variant-ligatures comme étant none et les valeurs des autres propriétés à normal, leur valeur initiale.
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>
Définit la valeur de la propriété font-variant-ligatures. Les valeurs possibles sont: common-ligatures,no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures,contextual, et no-contextual.
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()
Définit les mots-clés et fonctions relatives à la propriété font-variant-alternates.
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
Définit le mot-clé relatif à la propriété font-variant-caps.
<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero
Définit la valeur de la propriété font-variant-numeric. Les valeurs possibles sont lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, et slashed-zero.
<east-asian-variant-values>, <east-asian-width-values>, ruby
Définit la valeur de la propriété font-variant-east-asian. Les valeurs possibles sont: jis78, jis83,jis90, jis04, simplified, traditional, full-width, proportional-width, ruby.

Syntaxe formelle

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]


<common-lig-values> = [ common-ligatures | no-common-ligatures ]
<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]
<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]
<contextual-alt-values> = [ contextual | no-contextual ]
<feature-value-name> = <custom-ident>
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]

Exemples

HTML

<p class="normal">Firefox normal</p>
<p class="small">Firefox petit</p>

CSS

p.normal {
    font-variant: normal;
}
p.small {
    font-variant: small-caps;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 3
La définition de 'font-variant' dans cette spécification.
Candidat au statut de recommandation La propriété est désormais une propriété raccourcie pour les nouvelles propriétés  font-variant-*.
CSS Level 2 (Revision 1)
La définition de 'font-variant' dans cette spécification.
Recommendation Aucun changement.
CSS Level 1
La définition de 'font-variant' dans cette spécification.
Recommendation Définition initiale.
Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
font-variantChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 1Samsung Internet Android Support complet Oui
ßSSChrome Support complet OuiEdge Aucun support NonFirefox Support complet 1IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet Oui
iİ and ıIChrome Support complet OuiEdge Support complet 12Firefox Support complet 14IE Support complet 4Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 14Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Greek accented charactersChrome Support complet OuiEdge Support complet 12Firefox Support complet 15IE Support complet 4Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 15Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
CSS Fonts Module Level 3 shorthandChrome Support complet 52Edge Aucun support NonFirefox Support complet 34
Support complet 34
Aucun support 33 — 34
Désactivée
Désactivée From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 39Safari Support complet 9.1WebView Android Support complet 52Chrome Android Support complet 52Firefox Android Support complet 34
Support complet 34
Aucun support 33 — 34
Désactivée
Désactivée From version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 41Safari iOS Support complet 9.3Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, B_M, fscholz, Gibus, Sebastianz, Igro, teoli, FredB, Mgjbot, Fredchat
Dernière mise à jour par : SphinxKnight,