타이머, 숫자 가변폭 폰트를 고정폭 폰트로 font-variant-numeric CSS

 

타이머, 숫자 가변폭 폰트를 고정폭 폰트로 

font-variant-numeric CSS

 

타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.

이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.

동영상을 잘보면 미세하게 끝이 움직인다.

 

적용 전

 

왜 이런 이슈가 생기는 걸까?

고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.

말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다.

 

이때는 어떻게 고정폭으로 적용할까?

아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함

font-variant-numeric: tabular-nums;

 

적용하고나니 숫자모두 동일한 고정폭을 가지게 되었기 때문에 시간초가 줄어도 끝이 움직이지 않는다.

 

적용 후 

 

숫자의 폭이 동일해졌으므로, 숫자 정렬이 깔끔하다.

 

font-variant-numeric의 속성에는

proportional-nums(가변폭),

tabular-nums(고정폭) 외에도

lining-nums, oldstyle-nums,, diagonal-fractions, stacked-fractions 같은 속성들이 존재한다.

 

아 자고로, 해당 속성은 OpenType 기능을 지원하는 폰트만 사용 가능하다는데....

OpenType은 폰트 포맷의 하나로 Microsoft와 Adobe가 공동으로 개발한 디지털 서체 기술이라고 한다.

단일 파일로 여러 언어와 스크립트를 지원하도록 설계되었고, 글꼴의 고급 렌더링을 지원한다. (=> font-variant-numeric도 때문에 사용 가능.)

 

css도 끝없이 공부해야 몸이 고생안하는듯 하다!