font-variant 속성은 font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures 및 font-variant-east-asian을 지정하는 데 사용됩니다.
구문
font-variant 속성의 구문은 다음과 같습니다 -
Selector { font-variant: /*value*/ }
다음 예는 CSS font-variant 속성을 보여줍니다 -
예시
<!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>
출력
이것은 다음과 같은 출력을 제공합니다 -
예시
<!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>
출력
이것은 다음과 같은 출력을 제공합니다 -