여태까지 고쳐온 오류들 : 웹폰트 깨지는 현상 해결 5가지

이번에 보안상 문제로 링크로 걸려있던 웹폰트를 @font-face로 로컬 경로로 임베드하면서, 브라우저에서 글자가 깨져보이는 현상이 발견되었다. 특히 13px같이 작고 홀수사이즈인 폰트는 더더욱 깨져보인다.

브라우저마다 폰트를 랜더링하는 방식이 달라 이를 원천적으로 해결할 방법은 없다..만, 꼼수는 있다.

---

꼼수 1 : -webkit-text-stroke

-webkit-text-stroke: 1px;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);

꼼수 2 : text-shadow

text-shadow: #fff 0px 1px 1px;
text-shadow: #333 0px 0px 1px; //검은색 글자용

꼼수 3 : -webkit-font-smoothing

-webkit-font-smoothing: antialiased;

꼼수 4 : transform: rotate

transform: rotate(0.03deg);