Font Variant Numeric

​Basic usage

​숫자 변형 적용하기

font-variant-numeric 유틸리티를 사용하면 숫자, 분수, 서수 표시 등에 대한 추가 글리프를 활성화할 수 있습니다. (이 기능은 해당 글꼴이 지원하는 경우에만 적용됩니다.)

이 유틸리티는 조합이 가능하므로, HTML에서 여러 클래스를 결합하여 여러 font-variant-numeric 기능을 동시에 활성화할 수 있습니다:

<p class="ordinal slashed-zero tabular-nums ...">
  1234567890
</p>

많은 글꼴이 이러한 기능을 지원하지 않는다는 점에 유의하세요. (예를 들어, 분수 표시 기능은 특히 드물게 지원됩니다.) 따라서 사용 중인 글꼴에 따라 일부 유틸리티는 효과가 없을 수 있습니다.

​Ordinal

ordinal 유틸리티를 사용하면 서수 표시를 위한 특수 문자를 적용할 수 있습니다.

<p class="ordinal ...">1st</p>

​Slashed Zero

slashed-zero 유틸리티를 사용하면 0에 슬래시를 추가할 수 있습니다. 이는 O와 0을 명확히 구분해야 할 때 유용합니다.

<p class="slashed-zero ...">0</p>

​라이닝 숫자

lining-nums 유틸리티를 사용하면 모든 숫자 글리프가 기준선에 맞춰 정렬됩니다. 이는 OpenType의 lnum 기능에 해당합니다. 대부분의 폰트에서 기본값으로 설정되어 있습니다.

<p class="lining-nums ...">
  1234567890
</p>

​올드스타일 숫자

oldstyle-nums 유틸리티를 사용하면 일부 숫자가 아래로 내려가는 형태의 숫자 글리프를 사용할 수 있습니다. 이는 OpenType 기능 중 onum에 해당합니다.

<p class="oldstyle-nums ...">
  1234567890
</p>

​비례 숫자

proportional-nums 유틸리티를 사용하면 균일한 너비가 아닌 비례 너비를 가진 숫자 글리프를 사용할 수 있습니다. 이는 OpenType의 pnum 기능에 해당합니다.

<p class="proportional-nums ...">
  12121
</p>
<p class="proportional-nums ...">
  90909
</p>

​탭 숫자

tabular-nums 유틸리티를 사용하면 균일한/탭 너비를 가진 숫자 글리프를 사용할 수 있습니다. 이는 tnum OpenType 기능에 해당합니다.

<p class="tabular-nums ...">
  12121
</p>
<p class="tabular-nums ...">
  90909
</p>

​대각선 분수

diagonal-fractions 유틸리티를 사용하면 슬래시로 구분된 숫자를 일반적인 대각선 분수로 바꿀 수 있습니다. 이는 OpenType의 frac 기능에 해당합니다.

<p class="diagonal-fractions ...">
  1/2 3/4 5/6
</p>

​Stacked fractions

stacked-fractions 유틸리티를 사용하면 슬래시로 구분된 숫자를 일반적인 겹쳐진 분수로 바꿀 수 있습니다. 이는 OpenType의 afrc 기능에 해당합니다. 이 기능을 지원하는 폰트는 매우 드물며, 여기서는 Ubuntu Mono를 사용했습니다.

<p class="stacked-fractions ...">
  1/2 3/4 5/6
</p>

​숫자 글꼴 변형 초기화

특정 중단점(breakpoint)에서 글꼴 기능을 초기화하려면 normal-nums 속성을 사용하세요. 이는 주로 특정 중단점에서 글꼴 기능을 초기화할 때 유용합니다:

<p class="slashed-zero tabular-nums md:normal-nums ...">
  12345
</p>

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:tabular-nums 를 사용하면 tabular-nums 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<p class="proportional-nums hover:tabular-nums">
  <!-- ... -->
</p>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:tabular-nums를 사용하면 중간 화면 크기 이상에서만 tabular-nums 유틸리티를 적용할 수 있습니다.

<p class="proportional-nums md:tabular-nums">
  <!-- ... -->
</p>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.