CSS / Reference / font-variant

font-variant는 작은 대문자, 숫자 모양, 합자 등 글꼴의 변형 기능을 묶어 지정하는 단축 속성입니다. small-caps는 소문자를 작은 대문자 형태로 표시하는 대표적인 값이며, 실제 모양은 글꼴이 제공하는 기능에 따라 달라집니다.

문법과 주요 값

.label { font-variant: small-caps; }
.amount { font-variant-numeric: tabular-nums; }

값의 적용 범위와 문법은 MDN의 font-variant 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 font-variant-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-variant 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font: 26px/1.6 Georgia, serif; }
.target { font-variant: small-caps; }
.reference { font-variant: normal; }
</style>
</head>
<body>
<main id="demo">
<h1>font-variant 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">small-caps</p><div class="target">Hello CSS World</div></div><div class="b"><p class="label">normal</p><div class="reference">Hello CSS World</div></div></section>
</main>
</body>
</html>

영문 소문자의 모양과 높이를 비교하세요. 글꼴이 진짜 작은 대문자 글리프를 제공하는지에 따라 브라우저가 만든 대체 표현과 차이가 날 수 있습니다.

문자 내용은 바뀌지 않습니다

small-caps는 표시를 바꾸는 기능입니다. DOM의 실제 문자열을 대문자로 바꾸지 않으며, 대문자 변환을 목적으로 하는 text-transform: uppercase와는 다릅니다. 한글 자체에는 영문 대소문자와 같은 변화가 없지만 영문이 섞인 내용에는 차이가 나타날 수 있습니다.

필요한 하위 속성만 지정하기

글꼴 기능은 font-variant-caps, font-variant-numeric, font-variant-ligatures 등으로 나누어 지정할 수 있습니다. 단축 속성을 나중에 쓰면 다른 하위 설정도 재설정될 수 있으므로 숫자 정렬만 필요할 때는 해당 하위 속성을 사용하세요. 글꼴마다 지원 기능이 같지는 않습니다.

적용되지 않거나 예상과 다를 때

• 한글만 있는 예문이라면 영문 소문자를 추가해 small-caps를 비교합니다.
• 숫자 기능이 안 보이면 사용 중인 실제 글꼴과 기능 지원 여부를 확인합니다.

관련 설정을 함께 조정할 때는 글꼴 후보를 지정하는 font-family을 참고하세요.