CSS Font Variant

Please Share On:

Definition:

CSS font-variant is used to convert the text into lowercase or uppercase using CSS font-variant property value.

Syntax:

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

Property Value:

Property Value	Description
1. normal	This is a default font-variant, where browsers display normal fonts.
2. small-caps	All fonts converted into upper case
3. initial	Match this property to its default value
4. inherit	Inherit this property from its parent value

1. normal

Definition:

This is a default font-variant, where browsers display normal fonts.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .normal{
      border: 3px solid black;
      background-color: pink;
      font-variant: normal;
    }
    </style>
  </head>

  <body>
  	<div class="normal">This is a paragraph with a normal font-variant.</div>
  </body>
</html>

Output:

try it yourself

2. small-caps

Definition:

By using the small-cap value in the font variants, it converts all fonts into upper case.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .small-caps{
      border: 3px solid black;
      background-color: pink;
      font-variant: small-caps;
    }
    </style>
  </head>

  <body>
  	<div class="small-caps">This is a paragraph with a small-caps font-variant.</div>
  </body>
</html>

Output:

try it yourself

3. initial

Definition:

Match this property to its default value.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .initial{
      border: 3px solid black;
      background-color: pink;
      font-variant: initial;
    }
    </style>
  </head>

  <body>
  	<div class="initial">This is a paragraph, where the fonts are matched to its default value.</div>
  </body>
</html>

Output:

try it yourself

4. inherit

Definition:

Inherit this property from its parent value.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .inherit{
      border: 3px solid black;
      background-color: pink;
      font-variant: inherit;
    }
    </style>
  </head>

  <body>
 	 <div class="inherit">This is a paragraph, where its property is inherited from its parent value.</div>
  </body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 338

Definition:

Syntax:

Property Value:

1. normal

Definition:

Source Code:

Output:

2. small-caps

Definition:

Source Code:

Output:

3. initial

Definition:

Source Code:

Output:

4. inherit

Definition:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.