웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] CSS로 안티앨리어싱 효과 내기 (폰트를 부드럽게) 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] CSS로 안티앨리어싱 효과 내기 (폰트를 부드럽게)

해피CGI윤실장 2018. 9. 5. 08:59

기본 폰트가 아닌 웹폰트를 사용하다가 보면 같은 소스와 폰트인데도 불구하고
브라우저마다의 랜더링 차이로 글자가 다르게 보일때가 종종 있습니다.

일반인들은 잘 눈치채기 어렵지만, 웹디자이너들의 눈에는 금방 확인이 되는 부분이죠.

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


이럴때를 대비하여 폰트 안티앨리어싱을 적용할 수 있습니다.
참고로 표준코드는 아니지만, CSS 트릭을 사용하여 포토샵과 같은 부드러운 폰트의
느낌을 나타낼 수 있습니다. 




-webkit-text-stroke: 0.45px;
// or
-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.1);
// or
text-shadow: #fff 0px 1px 1px;


위에 적힌 영문사이트에서는 SVG 폰트를 사용하면
양쪽해결이 되긴 하지만 역시나 무거워지므로 크게 권하진 않는듯 합니다.



홈페이지바로가기

Comments