CSS3의 글꼴 다듬기 및 앤티앨리어싱 렌더링 예제에 대한 자세한 설명

이 글은 주로 CSS3의 글꼴 다듬기 및 앤티앨리어싱 렌더링을 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

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

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

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

1. 없음: 앤티앨리어싱 없음

2. subpixel-antialiased(기본값): 서브픽셀 스무딩이 일반적입니다. Mac OS 및 Windows용 MacType

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

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

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

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

글꼴의 가장자리는 여전히 다르며, 많이 추가하면 정말 좋아 보입니다.

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

위 내용은 CSS3의 글꼴 다듬기 및 앤티앨리어싱 렌더링 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!