font-variant (CSS property)

Spec
Inherited Initial Version
Yes normal CSS1, 2
Browser support (more…)
IE8+ FF1+ SA3.1+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

font-variant: { normal | small-caps | inherit } ;

Description

font-variant sets the font variant that will be used for the text content of an element.

Small-caps fonts are fonts in which lowercase letters appear as smaller versions of the corresponding uppercase letters.

Example

This style rule makes h1 headings render with small-caps:

h1 {
  font-variant: small-caps;
}

Value

normal
The value normal specifies a font that is not a small-caps font.
small-caps
The value small-caps specifies a font that is a small-caps font. CSS2.1 allows a user agent to use scaled-down versions of uppercase letters in lieu of true small-caps lowercase letters, and even to use ordinary uppercase letters as a replacement.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Full Full Full Full Full None None Full Full Full Full Full Full

In Internet Explorer for Windows versions up to and including 7, setting font-variant to small-caps causes the values lowercase and uppercase for the text-transform property to behave as if they were set to none. The computed intrinsic height of an inline box will be incorrect for small-caps text if the text consists solely of lowercase letters, and contains no whitespace or punctuation characters.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Safari versions up to and including 3 don’t support this property.

User-contributed notes

ID:
#2
Contributed:
by webinista
Date:
Mon, 27 Oct 2008 15:50:37 GMT

Safari 3.1.2 supports font-variant.

Related Products