[CSS] Font-Smoothing 안티앨리어싱 속성

Font-Smoothing

웹폰트를 적용할 때, Font-Smoothing 속성의 안티앨리어싱 속성을 적용하면 폰트가 더욱 부드럽게 보일 수 있다. 하지만, 반대로 이야기하면 선명함은 떨어질 수 있다는 얘기다. 따라서, 폰트를 선명하게 하고 싶다면 안티앨리어싱을 적용하는 것이 오히려 역효과일 수 있다.

힌팅이 떨어지는 폰트거나, 뭉개지는 폰트에 안티앨리어싱 효과를 적용하면 훨씬 부드럽고 포토샵으로 디자인 한 것처럼 적용된 글꼴을 적용할 수 있을 것이다. 다만, Font-Smoothing 속성 자체가 Webkit 기반의 Safari와 Chrome에서만 사용이 가능하기 때문에, 브라우징 호환 문제가 있을 수 있다.

속성 적용 방법은 아래와 같이 선언합니다.

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Have you ever felt like your web font is not as smooth as it is in your Sketch or Photoshop design?  
The font-smoothing property is most likely why.

Here’s how you get smooth fonts with just two lines of code.