CSS - font-variant-caps Property

The font-variant-caps CSS property is used to control the usage of alternate glyphs for capital letters. The value is specified using a keyword.

Possible Values

  • normal: Deactivates usage of alternate glyphs.

  • small-caps: Enables use of small capitals. Corresponds to OpenType feature smcp.

  • all-small-caps: Enables use of small capitals for both upper and lower case letters. Corresponds to OpenType feature c2sc, smcp.

  • petite-caps: Enables use of petite capitals. Corresponds to OpenType feature pcap.

  • all-petite-caps: Enables use of petite capitals for both upper and lower case letters. Corresponds to OpenType feature c2pc and pcap.

  • unicase: Enables use of mix of small capitals for uppercase letters with normal lowercase letters. Corresponds to OpenType feature unic.

  • titling-caps: Enables use of titling capitals. Corresponds to OpenType feature titl.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariantCaps = "normal | small-caps";

CSS font-variant-caps - Basic Example

Here is an example:

<html>
<head>
<style>
  .small-caps {
    font-variant-caps: small-caps;
    font-size: large;
    font-style: italic;
  }
   .normal {
    font-variant-caps: normal;
    font-size: large;
    font-style: italic;
  }
</style>
</head>
<body>
   <p class="small-caps">Font Variant turned to small-caps</p>
   <p class="normal">Font Variant set to normal</p>
</body>
</html>
Advertisements