CSS: font-variant property

This CSS tutorial explains how to use the CSS property called font-variant with syntax and examples.

Description

The CSS font-variant property defines the variant of the font such as small-caps or normal.

Syntax

The syntax for the font-variant CSS property is:

font-variant: value;

Parameters or Arguments

value

The variant of a font. It can be one of the following:

Value	Description
normal	Normal font-variant p { font-variant: normal; }
small-caps	Small-caps font-variant p { font-variant: small-caps; }
inherit	Element will inherit the font-variant from its parent element p { font-variant: inherit; }

Note

• If small-caps is chosen as the font-variant and a small-caps font is unavailable, some browsers will try to simulate a small-caps font.

Browser Compatibility

The CSS font-variant property has basic support with the following browsers:

• Chrome
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• IE Phone
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Example

We will discuss the font-variant property below, exploring examples of how to use this property in CSS.

The font-variant property can be applied to different HTML tags.

Span Tag

For example, we could style a <span> tag as follows:

span { font-variant: normal; }

or

span { font-variant: small-caps; }

or

span { font-variant: inherit; }

These are examples of how you would style the <span> tag using the font-variant property.

P Tag

You can also apply this CSS property to the <p> tag:

p { font-variant: normal; }

or

p { font-variant: small-caps; }

or

p { font-variant: inherit; }

These examples would style the text within the <p> tag by setting the font-variant in CSS.

Div Tag

If you wanted to style a <div> tag, you would use the following CSS:

div { font-variant: normal; }

or

div { font-variant: small-caps; }

or

div { font-variant: inherit; }

These are examples of how to use the font-variant property with the <div> tag.