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:
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:
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:
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:
Donate to support writers
You may be interested in the following topics:
- CSS Font Google
- CSS Font Kerning
- CSS Font Weight
- CSS Font Variant
- CSS Font Stretch
- CSS Font Style
- CSS Font Size
- CSS Font Family
- CSS Font (All Properties)