The font-variant property is used to specify the font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian.
Syntax
The syntax of font-variant property is as follows −
Selector { font-variant: /*value*/ }
The following examples illustrate CSS font-variant property −
Example
<!DOCTYPE html> <html> <head> <style> table * { box-shadow: inset 0 0 10px lavender; font-size: 1.2em; font-variant: small-caps; } td + td { font-variant: all-petite-caps; } </style> </head> <body> <table> <tr> <th>DEMO a</th> <th>DEMO b</th> </tr> <tr> <td>1a</td> <td>1b</td> </tr> <tr> <td>2a</td> <td>2b</td> </tr> </table> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> div { display: flex; margin: 20px; width: 20%; float: left; box-shadow: inset 0 0 9px orange; } #demo { font-variant: unicase; } </style> </head> <body> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div> <div id="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque felis ac lorem ornare maximus.</div> </body> </html>
Output
This gives the following output −