This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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>

View live example

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

Fonts

External resources