CSS font-variant Property
Description
The font-variant property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand.
- Initial value
- normal
- Applies to
- All elements
- Inherited
- Yes
- Media
- Visual
- Computed value
- See individual properties
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.fontVariant
Syntax
font-variant: normal | small-caps
Values
- normalSelects a font that is not a small-caps font, usually the available normal font.
- small-capsSelects a small-caps font. If no small caps variant is available, the browser generates a small caps approximation.
- inherit
Example
<p>The paragraph is displayed in regular font.</p>
<p class="test">Lowercase letters are set as uppercase reduced size.</p> .test {
font-variant: small-caps;
}Give it a Try
Click the button below to experiment with this property.
Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 4 | 12 | 1 | 1 | 3.5 | 1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 1 | 18 | 4 | 11 | 1 | 1.0 |
Last updated by CSSPortal on: 1st November 2019
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL