font-smoothing 폰트 부드럽게 만들기

 

 

부드러운 폰트를 만들기 위해서 css의 -webkit-font-smoothing를 사용할수 있습니다.

-webkit-font-smoothing: antialiased;

이 기능은 비표준이라서 모든환경과 브라우저에서 적용되는 것은 아닙니다.

 

구문(Systax)

/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* <length> value */
font-smooth: 2em;

/* Global values */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: unset;

 

속성

• auto - 브라우저가 자동으로 결정하도록 합니다. 하위 픽셀의 안티앨리어싱을 사용하는 것이 기본값입니다.
• none - 안티앨리어싱을 적용하지 않기 때문에 끝이 날카로운 폰트가 표시 됩니다.
• antialiased - 글꼴에 안티앨리어싱을 적용합니다.
• subpixel-antialiased - 비레티나 디스플레이에서 가장 선명한 텍스트를 제공합니다.

 

Firefox에도 유사한 속성이있습니다.

-moz-osx-font-smoothing

 

 

css 적용 방법

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

html 적용

<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>