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 AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome 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 18Edge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
ßSSChrome ? Edge Aucun support NonFirefox Support complet 1IE ? Opera ? Safari ? WebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
iİ and ıIChrome Aucun support NonEdge ? Firefox Support complet 14IE ? Opera ? Safari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Support complet 14Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
Greek accented charactersChrome Aucun support NonEdge ? Firefox Support complet 15IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
CSS Fonts Module Level 3 shorthandChrome ? Edge ? Firefox 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 ? Opera ? Safari Support complet 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox 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 ? Safari iOS Support complet 9.3Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
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, B_M, fscholz, Gibus, Sebastianz, Igro, teoli, FredB, Mgjbot, Fredchat
Dernière mise à jour par : SphinxKnight,