/    /  CSS font-variant

CSS font-variant

 

This CSS property sets the variation of the font family.

The font-variant property defines whether or not a text should be displayed in a small-caps font.

In a small-caps font family, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appear in smaller font size than the original uppercase letters in the text.

 

Syntax:

 

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

 

Property Values:

 

  • normal: Specifies the normal font-face.
  • small-caps: The lowercase letters are displayed as uppercase letters but in a smaller size.
  • initial: Property to its default value.
  • inherit: Property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>

p {
font-variant: small-caps;
font-size: 25px;
}
h2 {
font-variant: normal;
}
</style>
</head>
<body>
<h2> This heading is shown in the normal font. </h2>
<p> HELLO WORLD </p>
<p> hello world. This text is affected by the <b> small-caps </b> value. </p>
</body>
</html>

 

OUTPUT:

 

CSS font-variant