html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS font-variant property

Definition

The CSS font-variant property is used to make text appear in small caps.

Applies To

All elements.

Property Values

inherit - The font variant properties are inherited from the parent element.

normal - The font variant is set to normal (default).

small-caps - The font variant is set to small caps.

Default Value

Default value of font-variant is set to normal.

Inheritance

The font-variant property is inherited from the parent element if none is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS font-style property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS font-variant Property</title>

<!-- Valid values for CSS font-variant Property are:
	
	inherit, normal and small-caps. 
	
--> 

<style type="text/css">

/* Body font style variant to small caps to show inheritance */
body {
  font-variant: small-caps;
}

/* h1 headings font variant set to normal */
h1 {
  font-variant: normal;
}

/* h2 headings font variant set to inherit (inherits from parent element) */
h2 {
  font-variant: inherit;
}

/* Paragraph font variant set to normal */
p {
  font-variant: normal;
}

</style>

</head>
<body>
<h1>H1 Headings Font Variant will be set to normal</h1>
<h2>H2 Headings Inherit From Body Element So Font Variant Will Be Set To Small Caps</h2>
<p>Paragraph Font Variant will be set to normal.</p>
</body>
</html>

How It Looks

The results of using the font-variant property with the values above will look something like the following:

notepad
CSS font-style    << Prev          Next >>   CSS font-weight

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.