CSS font-variant Property
The font-variant property is used to convert all lowercase letters into uppercase letters. But the converted upper letters appear too small font-size than the original uppercase letters.
Syntax:
font-variant: normal|small-caps|initial;
Default Value: normal
Property Values:
- normal: It has a default value. It specifies a normal font-size.
- small-caps: It is used to convert all the lowercase letters into uppercase letters.
- initial: It sets the property to its default value.
Example: In this example, we are using font-variant: normal; property.
html
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } p.Beginner { font-variant: normal; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >font-variant:normal;</ h2 > < p class = "Beginner" >w3wiki.</ p > < p >It is a computer science portal for Beginner.</ p > </ center > </ body > </ html > |
Output:
Example: In this example, we are using font-variant:small-caps; property.
html
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } p.Beginner { font-variant: small-caps; } .gfg { font-variant: small-caps; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >font-variant:small-caps;</ h2 > < p class = "Beginner" >w3wiki.</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ p > </ center > </ body > </ html > |
Output:
Example: In this example, we use font-variant: initial; property.
html
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } p.Beginner { font-variant: initial; } .gfg { font-variant: initial; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >font-variant:initial;</ h2 > < p class = "Beginner" >w3wiki.</ p > < p class = "gfg" > It is a computer science portal for Beginner. </ p > </ center > </ body > </ html > |
Output:
Supported Browsers: The browser supported by CSS font-variant property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above
Contact Us