CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS font-variant Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

This font-variant CSS property sets the variation of the font family.

The following table summarizes the usages context and the version history of this property.

Default value: normal
Applies to: All elements
Inherited: Yes
Animatable: No. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

font-variant: 
normal | small-caps | initial | inherit

The example below shows the font-variant property in action.

  • p {
  •     font-variant: small-caps;
  • }

Property Values

The following table describes the values of this property.

Value Description
normal Specifies a normal font face.
small-caps Specifies a font that is labeled as a small-caps font. If a small-caps font is not available, browsers will simulate this variant by taking a normal font and replacing the lowercase letters by scaled-down uppercase letters.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element font-variant property.
 

Note: In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions.


Browser Compatibility

The font-variant property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 3.5+

Further Reading

See tutorial on: CSS Fonts, CSS Text.

Related properties and at-rules: font, font-style, font-weight, font-size, line-height, font-family, @font-face.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.