웹폰트, font-smoothing 안티앨리어싱을 적용해도 깨져 보일 때

웹폰트가 깨져서 보이는데 해결이 안 될 때

제목과 책 정보는 제대로 나오는데, 본문이 이상하게 깨져 보이는 경우가 있다. 그래서 font-smooth나 -webkit-font-smoothing 같은 걸 적용 해보기도 했지만 결국 똑같았을 것이다. 왜냐하면 그게 문제가 아니니까.

폰트가 작은 게 문제다

윈도우 환경에서는 글자 크기가 작으면 웹폰트 랜더링에 안티앨리어싱이 제대로 적용되지 않는 경우가 있다. 그럼 안티앨리어싱이 제대로 되는 다른 폰트를 써야 하나요? 나는 꼭 이 폰트 써야겠는데?(디자이너들은 대체로 고집이 세다)
그럴 때는 다음과 같은 꼼수를 사용해서 해결할 수 있다.

1 2 3

p{ transform:rotate(-0.03deg); }

속성 추가 후 확인해보면 훨씬 부드럽게 랜더링 되어 있다. 단, transform을 사용하기 때문에 span태그에 사용할 때는 inline-block이나 block으로 영역을 잡을 수 있도록 처리해주어야 한다.