font-variant

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
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
Greek accented charactersChrome Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek text.
Edge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek text.
IE Aucun support NonOpera Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari Aucun support NonWebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek.
Chrome Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek text.
Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek text.
Opera Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may correctly omit accents in all-uppercase Greek.
iİ and ıIChrome Support complet 31Edge Support complet 12Firefox Support complet 14IE Support complet 4Opera Support complet OuiSafari Support complet 8WebView Android Support complet ≤37Chrome Android Support complet 31Firefox Android Support complet 14Opera Android Support complet OuiSafari iOS Support complet 8Samsung Internet Android Support complet Oui
ßSSChrome Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.
Edge Aucun support NonFirefox Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.
IE Aucun support NonOpera Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.
Safari Aucun support NonWebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.
Chrome Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.
Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.
Opera Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.
Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
Notes
Aucun support Non
Notes
Notes Some operating systems may capitalize ß as SS.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
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