CSS - font-variant



The font-variant property determines the use of one of two font faces to be used in the rendering of a given element's text.

It is used to specify whether the text should be rendered in small capitals.

Possible Values (as per CSS Level 2.1)

  • normal: This is the default value, which specifies that the text should be rendered normally without any special variant.

  • small-caps: This value specifies that the text should be rendered in small capitals. The font used must have a small-caps variant available, otherwise it will fall back to normal rendering.

font-variant is a shorthand for following properties:

  • font-variant-alternates

  • font-variant-caps

  • font-variant-east-asian

  • font-variant-ligatures

  • font-variant-numeric

  • font-variant-position

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariant = "small-caps";

CSS font-variant - Basic Example

Here is an example:

<html>
<head>
</head>
<body>
   <p style="font-variant: normal;">Font-variant is normal.</p>
   <p style="font-variant: small-caps;">Font-variant is small-caps.</p>
</body>
</html> 
Advertisements