[CSS + Chrome] font size 최소 크기 & 우회하기

크롬에서는 font size에 최소 크기가 정해져 있다.

현재 최소 크기는 10px이며 font-size 속성만 변경해서는 절대로 10px 미만의 크기로는 변경할 수 없다. 즉 font-size 속성에 1~10px 사이의 값이 들어가도 10px로 변경되어 표시된다.

예전 글들을 보다 보면 -webkit-font-size-adjust 속성을 사용하여 해결했다는 내용이 있는데, 현재 크롬은 해당 속성을 제공하지 않고 있다.

여기서 텍스트의 크기를 10px 보다 작게 보이도록 우회할 수 있는 편법이 있다.

transform 속성을 사용하는 것이다.

transform: translate(-22%, -50%) scale(0.5);
display: inline-block;

편법이라고 말한 이유는 폰트의 크기를 조정하는 것이 아니라 viewport를 건드리기 때문이며 생각하지 못한 부분에서 문제가 발생할 여지가 있으므로 사용한다면 다양한 테스트를 진행해야 할 것이다.

 

* translate(x, y) = 위치 조정, % 이외에 px 등도 사용이 가능하다.

* scale(x) = 크기 조정, 숫자만 넣으면 된다. 0.5 = 50%

* display: inline-block = transform으로 계산할 때 텍스트를 원하는 위치에 보내기 위해서 사용