CSS / Reference / font-variant

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

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.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 등으로 나누어 지정할 수 있습니다. 단축 속성을 나중에 쓰면 다른 하위 설정도 재설정될 수 있으므로 숫자 정렬만 필요할 때는 해당 하위 속성을 사용하세요. 글꼴마다 지원 기능이 같지는 않습니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 기존 파일의 .target 글자를 선택해 Elements에서 원문이 Hello CSS World로 남는지 확인합니다. small-caps를 normal로 바꾸고 복구합니다.
2. 숫자 정렬을 확인하려면 .target의 내용을 1111 / 8888로 바꾸고 font-variant를 normal, font-variant-numeric을 tabular-nums로 지정합니다. 지원 글꼴에서는 숫자 폭이 맞춰집니다. 같은 모습이면 실제 글꼴 기능을 확인하고 원래 문장·속성으로 복구합니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 font-family입니다.

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

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