font-variant

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propriété raccourcie CSS font-variant permet de définir tous les paramètres typographiques pour une police de caractères.

On peut aussi utiliser les valeurs de la propriété font-variant définies avec la spécification CSS de niveau 2 (première révision), normal ou small-caps, en utilisant la propriété raccourcie font.

Exemple interactif

Propriétés détaillées correspondantes

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

Syntaxe

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

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

Valeurs

normal

Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de normal. Les propriétés détaillées de font-variant sont : font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures et font-variant-east-asian.

none

Définit une valeur de none pour font-variant-ligatures et une valeur de normal pour les autres propriétés, leur valeur initiale.

<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>

Définit les mots-clés relatifs à la propriété détaillée 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 relatifs à la propriété détaillée font-variant-alternates.

small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps

Définit les mots-clés et fonctions relatifs à la propriété détaillée font-variant-caps.

<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero

Définit les mots-clés relatifs à la propriété détaillée 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 les mots-clés relatifs à la propriété détaillée font-variant-east-asian. Les valeurs possibles sont : jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width et ruby.

Définition formelle

Valeur initialenormal
Applicabilitéall elements and text. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

font-variant = 
normal |
none |
[ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ 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> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]

<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> =
<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

Utiliser la valeur small-caps de font-variant

HTML

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

CSS

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

Résultat

must be provided

Spécifications

Specification
CSS Fonts Module Level 4
# font-variant-prop
Scalable Vector Graphics (SVG) 2
# FontVariantProperty

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant
CSS Fonts Module Level 3 shorthand
Greek accented characters
historical-forms
none
normal
sub
super
iİ and ıI
ßSS

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Voir aussi