웹 폰트 적용 시 글자가 깨지는 현상을 방지하려면

한동안 블로그에 웹 폰트를 적용했다 다시 일반 폰트로 바꿨다.

어떠한 환경에서도 동일한 화면을 보여준다는 장점이 무색하게 어떠한 환경에서도 글자가 보기 싫었기 때문이다.

뭔가 어색한 글자 모양들. 특히, ㄹ 받침 어쩔…

그러다가 단비와도 같은 글을 PPSS에서 만났다: 한국어와 웹 폰트에 관한 6.1가지 사실

글자가 보기 싫었던 문제는 의외로 간단하게 해결이 가능했다.

1. 단지 윈도우 환경에서만 발생

2. 화면을 눈에 띄지 않게 회전시키는 것만으로도 보정이 가능함

위의 글에선 0.0000000001도를 돌리는 것으로 css를 썼는데, 파이어폭스에선 그렇게 하면 아예 반응이 없다.

아래와 같이 0.001도 정도가 적절한 듯.

h1, h2, div.article, div.communicateList, div#sidebar
{ transform: rotate(-0.001deg); }

그런데, 이렇게 쓰고 나니 이미지를 쓸 데 없이 살짝 뭉개버리는 현상이 발생한다.

그래서 이미지들만 반대 방향으로 돌렸다.

div.article .imageblock, div.article .tt-gallery-box, div.communicateList img
{ transform: rotate(0.001deg); }

이렇게 적용하니 아래와 같은 화면이 나온다.

특히 ㄹ처럼 복잡한 글자에서도 어색함이 없이 제대로 표시된다.