CSS의 font-variant 속성은 텍스트에 다양한 글꼴 변형 효과를 적용하는 데 사용됩니다. 이 속성 하나로 font-variant-caps(대소문자 변형), font-variant-numeric(숫자 스타일), font-variant-alternates(대체 글리프), font-variant-ligatures(합자), font-variant-east-asian(동아시아 글자 형태) 등 여러 세부 속성을 한 번에 지정할 수 있습니다.
기본 문법(Syntax)
font-variant 속성의 기본적인 작성 형식은 다음과 같습니다.
Selector {
font-variant: /*값*/
}아래 예제들을 통해 CSS font-variant 속성의 실제 동작 방식을 살펴보겠습니다.
예제 1: small-caps와 all-petite-caps 비교
첫 번째 예제는 표(table) 요소에 small-caps와 all-petite-caps 값을 적용하여 두 값의 차이를 시각적으로 보여줍니다.
<!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>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
small-caps는 소문자를 축소된 대문자 형태로 표시하고, all-petite-caps는 모든 문자를 더 작은 크기의 대문자로 렌더링한다는 점에서 차이가 있습니다.
예제 2: unicase 값 적용하기
두 번째 예제는 두 개의 div 요소 중 하나에 unicase 값을 적용해 일반 텍스트와의 차이를 확인합니다.
<!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>실행 결과
위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
unicase 값은 대문자와 소문자를 하나의 통일된 형태(유니케이스)로 섞어서 표시합니다. 이처럼 font-variant 속성을 활용하면 별도의 이미지나 추가 마크업 없이도 CSS만으로 세련된 타이포그래피 효과를 구현할 수 있습니다.