CSS font-variant attribute

Definition and Usage

The font-variant property sets the font display text to small caps, which means that all lowercase letters will be converted to uppercase, but the letters using small caps font are smaller in font size compared to the rest of the text.

Description

This property is mainly used to define small caps text. Theoretically, the user agent can calculate the small caps font based on the normal font.

See Also:

CSS Tutorial:CSS Font

CSS Reference Manual:CSS font attribute

HTML DOM Reference Manual:fontVariant Property

Example

Set the paragraph to small caps font:

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

Try It Yourself

CSS Syntax

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

Property Value

Value Description
normal Default Value. The browser will display a standard font.
small-caps The browser will display the font in small caps.
inherit Specifies that the value of the font-variant property should be inherited from the parent element.

Technical Details

Default Value: normal
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.fontVariant="small-caps"

Try It Yourself Example

Setting the variant of a font
This example demonstrates how to set the variant of a font.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5