CSS font-variant Property
The font-variant property is used to converted 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.
Syntax:
font-variant:normal;
Example:
html
<!DOCTYPE html><html><head> <style> h1 { color: green; } p.geeks { font-variant: normal; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>font-variant:normal;</h2> <p class="geeks">GeeksForGeeks.</p> <p>It is a computer science portal for geeks.</p></body></html> |
Output:
small-caps: It is used to convert all the lowercase letter into a uppercase letters.
Syntax:
font-variant:small-caps;
Example:
html
<!DOCTYPE html><html><head> <style> h1 { color: green; } p.geeks { font-variant: small-caps; } .gfg { font-variant: small-caps; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>font-variant:small-caps;</h2> <p class="geeks">GeeksForGeeks.</p> <p class="gfg"> It is a computer science portal for geeks. </p></body></html> |
Output:
initial: It sets the property to its default value.
Syntax:
font-variant:initial;
Example:
html
<!DOCTYPE html><html><head> <style> h1 { color: green; } p.geeks { font-variant: initial; } .gfg { font-variant: initial; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>font-variant:initial;</h2> <p class="geeks">GeeksForGeeks.</p> <p class="gfg"> It is a computer science portal for geeks. </p></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
Please Login to comment...