font-variant
Summary
The font-variant property enables you to select the small-caps font within a font family.
Overview table
- Initial value
normal
- Applies to
- All elements
- Inherited
- Yes
- Media
- visual
- Computed value
- as specified
- Animatable
- No
- CSS Object Model Property
fontVariant
- Percentages
- N/A
Syntax
font-variant: inherit
font-variant: normal
font-variant: small-caps
Values
- normal
- Selects a font that is not a ‘small-caps’ font, usually the available ‘normal’ font.
- small-caps
- Selects a ‘small-caps’ font. If not small caps variant is available, the browser generates a small caps approximation.
- inherit
- Inherits the font-variant setting from its parent.
Examples
A simple example to show the effect achieved when small-caps are applied to a text paragraph.
<p>I think WebPlatform rocks.</p>
The CSS applied to the HTML above.
p {
font-size: 300%;
font-variant: small-caps;
}
Notes
In (CSS Fonts Module Level 3, W3C Working Draft 11 December 2012), this property is extended. However, no browser seems to support these changes yet.
Related specifications
- CSS Fonts Module Level 3
- W3C Candidate Recommendation
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
- W3C Recommendation
See also
Related articles
CSS Font
font-variant
Fonts
font-variant
External resources
- MDN: [1]