CSS3의 글꼴 다듬기 및 앤티앨리어싱 렌더링

Drupal 공식 테마를 검색하던 중 흥미로운 비표준 CSS 선택기-webkit-font-smoothing를 발견하여 이를 가지고 놀기 시작했습니다. CSS3 글꼴을 사용하여 원활하게 표시하는 방법

W3C에서는 Font-Smooth와 같은 CSS에서 글꼴의 앤티앨리어싱 렌더링을 고려했지만 이는 다른 운영 체제에서 글꼴을 렌더링하기 때문일 수 있음을 알아야 합니다. 그리고 브라우저 커널에는 차이가 있으며, 한마디로 웹 표준에 채택되지 않았습니다. 그러나 WebKit은 글꼴이 더 부드럽게 표시되도록 앤티앨리어싱 효과를 지원하는 자체 비표준 선택기 세트를 여전히 유지합니다.

-webkit-font-smoothing에는 주로 다음 세 가지 속성이 있습니다.

• 없음: 앤티앨리어싱 없음

• subpixel-antialiased( 기본값 ): 하위 픽셀 스무딩은 Mac OS 및 Windows용 MacType에서 일반적으로 사용됩니다

• 앤티앨리어싱: 그레이스케일 스무딩은 Android 및 iOS와 같은 모바일 장치에서 일반적으로 사용됩니다

하지만 시도해 본 후에는 내 눈으로 후자의 차이를 전혀 구분할 수 없습니다. 그리고 이 비표준 CSS는 Safari, Chrome 등 WebKit 코어가 탑재된 대부분의 모바일 브라우저와 데스크톱 브라우저에만 적용됩니다. IE 시리즈는 스스로 지원하지 않는다고 비난하세요~

여기서 실제 효과를 살펴보겠습니다. 우선 앤티앨리어싱 렌더링을 사용하지 않습니다. 🎜>

다음은

앤티앨리어싱 렌더링을 사용하여 스무딩한 후의 효과입니다. -webkit-font-smoothing: subpixel-antialiased

글꼴 가장자리의 부드러움은 여전히 ​​다르며 나중에 훨씬 더 좋아 보입니다.

테스트 결과 브라우저 내장 기본 속성에 일반적으로 글꼴 안티앨리어싱이 포함되어 있는 것으로 나타났습니다. 하지만 안전을 위해 수동으로 추가하겠습니다.

CSS3의 글꼴 다듬기 및 앤티앨리어싱 렌더링에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!