font-variant-numeric

예제

서수 기호 사용하기

ordinal 유틸리티를 사용하면 서수 표시를 위한 특수 글리프를 지원하는 폰트에서 이를 활성화할 수 있습니다:

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

슬래시가 있는 0 사용하기

슬래시가 있는 0을 사용하려면 slashed-zero 유틸리티를 사용하세요. 이 유틸리티는 해당 기능을 지원하는 폰트에서 0에 슬래시를 강제로 적용합니다.

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

라이닝 숫자 사용하기

lining-nums 유틸리티를 사용하면 해당 기능을 지원하는 폰트에서 숫자 글리프를 기준선에 맞춰 정렬할 수 있습니다:

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

올드스타일 숫자 사용하기

oldstyle-nums 유틸리티를 사용하면 일부 숫자가 하강선(descenders)을 가지는 서체에서 숫자 글리프를 사용할 수 있습니다:

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

비례 숫자 사용하기

proportional-nums 유틸리티를 사용하면 해당 기능을 지원하는 폰트에서 비례 너비를 가진 숫자 글리프를 사용할 수 있습니다.

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

테이블 형식 숫자 사용하기

tabular-nums 유틸리티를 사용하면 지원되는 폰트에서 균일한/테이블 형식의 너비를 가진 숫자 글리프를 사용할 수 있습니다:

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

대각선 분수 사용하기

diagonal-fractions 유틸리티를 사용하면 슬래시로 구분된 숫자를 해당 폰트에서 지원하는 일반적인 대각선 분수로 바꿀 수 있습니다.

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

스택 분수 사용하기

stacked-fractions 유틸리티를 사용하면 슬래시로 구분된 숫자를 지원하는 폰트에서 일반적인 스택 분수로 바꿀 수 있습니다.

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

여러 유틸리티 조합하기

font-variant-numeric 유틸리티는 조합이 가능하므로, 여러 가지 변형을 함께 사용할 수 있습니다:

<dl class="...">  <dt class="...">소계</dt>  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>  <dt class="...">세금</dt>  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>  <dt class="...">총계</dt>  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd></dl>

숫자 글꼴 변형 초기화

숫자 글꼴 변형을 초기화하려면 normal-nums 속성을 사용하세요:

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

반응형 디자인

접두사 a font-variant-numeric 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.