폰트 숫자 변형

폰트 숫자 변형 (Font Variant Numeric)

숫자 글리프의 표시 방식을 다양하게 바꿔 주는 유틸리티예요. 서수(ordinal), 슬래시가 있는 0, 표(table)에 어울리는 고정폭 숫자, 분수 표기 등 고급 타이포그래피 기능을 켤 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

normal-nums font-variant-numeric: normal;

ordinal font-variant-numeric: ordinal;

slashed-zero font-variant-numeric: slashed-zero;

lining-nums font-variant-numeric: lining-nums;

oldstyle-nums font-variant-numeric: oldstyle-nums;

proportional-nums font-variant-numeric: proportional-nums;

tabular-nums font-variant-numeric: tabular-nums;

diagonal-fractions font-variant-numeric: diagonal-fractions;

stacked-fractions font-variant-numeric: stacked-fractions;

서수 글리프 사용하기 (Using ordinal glyphs)

ordinal 유틸리티를 사용하면 이를 지원하는 폰트에서 서수 표시를 위한 특별한 글리프를 활성화할 수 있어요.

1st

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

슬래시가 있는 0 사용하기 (Using slashed zeroes)

slashed-zero 유틸리티를 사용하면 이를 지원하는 폰트에서 슬래시가 있는 0을 강제로 사용할 수 있어요.

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

라이닝 피규어 사용하기 (Using lining figures)

lining-nums 유틸리티를 사용하면 이를 지원하는 폰트에서 베이스라인에 맞춰 정렬된 숫자 글리프를 사용할 수 있어요.

1234567890

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

올드스타일 피규어 사용하기 (Using oldstyle figures)

oldstyle-nums 유틸리티를 사용하면 일부 숫자에 descender가 있는 숫자 글리프를 사용할 수 있어요.

1234567890

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

비례 폭 피규어 사용하기 (Using proportional figures)

proportional-nums 유틸리티를 사용하면 비례적인 비례 폭(proportional width)을 가진 숫자 글리프를 사용할 수 있어요.

12121 90909

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

표 피규어 사용하기 (Using tabular figures)

tabular-nums 유틸리티를 사용하면 균일한 폭(tabular/신문식)을 가진 숫자 글리프를 사용할 수 있어요.

12121 90909

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

사선 분수 사용하기 (Using diagonal fractions)

diagonal-fractions 유틸리티를 사용하면 슬래시로 구분된 숫자를 이를 지원하는 폰트의 사선 분수로 바꿀 수 있어요.

1/2 3/4 5/6

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

세로 분수 사용하기 (Using stacked fractions)

stacked-fractions 유틸리티를 사용하면 슬래시로 구분된 숫자를 이를 지원하는 폰트의 세로(가로 쌓인) 분수로 바꿀 수 있어요.

1/2 3/4 5/6

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

여러 유틸리티 조합하기 (Stacking multiple utilities)

font-variant-numeric 유틸리티는 조합 가능(composable)해서 여러 변형을 결합해 한 번에 활성화할 수 있어요.

Subtotal$100.00Tax$14.50Total$114.50

<dl class="...">
  <dt class="...">Subtotal</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>
  <dt class="...">Tax</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>
  <dt class="...">Total</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd>
</dl>

숫자 폰트 변형 초기화 (Resetting numeric font variants)

normal-nums 속성을 사용하면 숫자 폰트 변형을 초기화할 수 있어요.

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

반응형 디자인 (Responsive design)

font-variant-numeric 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<p class="proportional-nums md:tabular-nums ...">
  Lorem ipsum dolor sit amet...
</p>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.

폰트 숫자 변형