font-variant
The font-variant property specifies font variants.
Formal Syntax
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 ] ]
JavaScript Access
// Access via element.style
element.style.fontVariant = 'normal';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| font-variant | 1 | 1 | 1 | 12 |
| css_fonts_shorthand | 52 | 34 | 9.1 | 79 |
| greek_accented_characters | — | — | — | — |
| historical-forms | 111 | 34 | 9.1 | 111 |
| none | 52 | 34 | 9 | 79 |
| normal | 1 | 1 | 1 | 12 |
| sub | 110 | 34 | 9.1 | 110 |
| super | 110 | 34 | 9.1 | 110 |
| turkic_is | 31 | 14 | 8 | 12 |
| uppercase_eszett | — | — | — | — |
Related Properties
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-palette
- font-size
- font-size-adjust
- font-style
- font-synthesis
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-emoji
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- font-synthesis-position 🧪
- font-width 🧪
- font-stretch 🗑️