CSS Font-Variant Property

In this chapter you will learn:
About font-variant property
Values of this property
Example of this property
CSS font-variant property is used to change the variant of the font. If you will set the property of a tag or element as font-variant then it will display according to the given value (normal. Small-caps, initial and inherit).
Values of this property:-
Values
Description
normal When you use this value then there is no change in the font of text of element.
small-caps When you use this property then the font changed in the capital letter but the size of the letter is smaller than the actual capital latter.
initial When you use this value then it display the default size of the font
inherit inherit from parent

Example of this property:
<html>
<head>
<style type="text/css">
#a
{
font-variant:normal;
}
#b
{
font-variant:small-caps;
}
</style>
</head>
<body>
<p id="a"> This is the example of font-variant:normal</p>
<p id="b"> This is the example of font-variant:small-caps</p>
</body>
</html>

Guide:-
When you will run the given code then the text of the paragraph whose id is “a” will display in the normal font but the paragraph whose id is “b” will display in the capital letter but in small size than the actual.
Output:- example of font-varient property

Summary

In this chapter you have learned about the font-variant property of CSS and a program is also given for your better guide so try to use this property in your own program. Click on Next button to continue-

 

Share your thought