font-variant
The font-variant CSS shorthand property allows you to set all the font variants for a font.
You can also set the <font-variant-css2> values of font-variant defined in CSS Level 2.1, (that is, normal or small-caps), by using the font shorthand.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| CSS at-rule | ||||||
font-variant Non-standard | 4 | 12 | 3.5 | 3.1 | 18 | 2 |
| CSS property | ||||||
css fonts shorthand CSS Fonts Module Level 3 shorthand | 52 | 79 | 34 | 9.1 | 52 | 9.3 |
greek accented characters Greek accented characters | | | | | | |
historical-forms | 111 | 111 | 34 | 9.1 | 111 | 9.3 |
none | 52 | 79 | 34 | 9 | 52 | 9 |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
sub | 110 | 110 | 34 | 9.1 | 110 | 9.3 |
super | 110 | 110 | 34 | 9.1 | 110 | 9.3 |
turkic is `i` → `İ` and `ı` → `I` | 31 | 12 | 14 | 8 | 31 | 8 |
uppercase eszett `ß` → `SS` | | | | | | |
| Other | ||||||
| The font-variant attribute indicates whether the text is to be rendered using variations of the font's glyph. | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
- Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
- Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
- Some operating systems may correctly omit accents in all-uppercase Greek text.
Notes 1 item(s)
Implementation note
- Some operating systems may capitalize `ß` as `SS`.
Notes 1 item(s)
Implementation note
- Some operating systems may capitalize `ß` as `SS`.
Notes 1 item(s)
Implementation note
- Some operating systems may capitalize `ß` as `SS`.
Notes 1 item(s)
Implementation note
- Some operating systems may capitalize `ß` as `SS`.
Syntax
CSS
.elegant-text {
font-variant: small-caps;
}
.number-table {
font-variant: tabular-nums lining-nums;
}Live demo
Use cases
-
Using font-variant
The font-variant CSS shorthand property allows you to set all the font variants for a font.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.