CSS로 안티앨리어싱 효과 내기 (폰트를 부드럽게) antialiased happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기타효과 > CSS로 안티앨리어싱 효과 내기 (폰트를 부드럽게) antialiased 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

HTML

MYSQL

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

CSS로 안티앨리어싱 효과 내기 (폰트를 부드럽게) antialiased

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

0 회

간단설명

브라우저마다의 랜더링차이 때문에 폰트가 달라보일떄가 있따. 이때를 위해 폰트 안티앨리어싱 효과를 적용하면 포토샵에서 폰트를 작성한것과 동일한 효과를 얻을 수 있다.

평가하기

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

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

-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 폰트를 사용하면
양쪽해결이 되긴 하지만 역시나 무거워지므로 크게 권하진 않는듯 합니다.