변동하는 숫자 폰트 크기 일정하게 조정하기 - font-variant-numeric: tabular-nums

font-variant-numeric

font-variant-numeric은 css 속성 중 하나로, 숫자, 분수 등의 숫자 형태를 글리프 비율을 조절한다. 

(글리프란 모바일, 웹 플랫폼 등과 같이 모든 아이디어 창작물에서 나타내는 그래픽 이미지를 말한다.)

단, 이 속성은 오픈타입 (.otf) 글꼴에만 적용이 가능하므로 사용하는 글꼴 타입이 오픈타입인지 확인을 하고 사용해야 한다.

 

font-variant-numeric: tabular-nums

그 중에서 tabular-nums는 이 그리프를 같은 사이즈로 정렬하여 어떤 숫자여도 같은 자간의 차이를 두도록 설정한다.

 

출처 및 참고자료

1. https://velog.io/@focusonmx/HIG-Glyph%EB%9E%80

[HIG] Glyph란?

2. chatGPT, font-variant-numeric: tabular-nums이란

3. font-variant-numeric, https://codepen.io/naradesign/pen/MWpdomm