CSS에서 글꼴 다듬기를 설정하는 방법

CSS에서는 "-webkit-font-smoothing" 속성을 사용하여 글꼴 다듬기를 설정할 수 있습니다. 구문은 "-webkit-font-smoothing:subpixel-antialiased"입니다. 이 속성은 페이지의 글꼴을 안티앨리어싱으로 만들 수 있습니다. 별칭이 지정되어 더 명확하고 편안해 보입니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

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

W3C에서는 Font-Smooth와 같은 CSS에서 글꼴의 앤티앨리어싱 렌더링을 고려했지만 이는 운영 체제 및 브라우저에 따라 글꼴 렌더링이 다르기 때문에 발생할 수 있습니다. 즉, 그는 웹 표준에 채택되지 않았습니다. 그러나 WebKit은 글꼴이 더 부드럽게 표시되도록 앤티앨리어싱 효과를 지원하는 자체 비표준 선택기 세트를 여전히 유지합니다.

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

• none: 앤티앨리어싱 없음

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

• 앤티앨리어싱: 그레이스케일 스무딩은 Android 및 iOS와 같은 모바일 장치에서 일반적으로 사용됩니다. 그러나 시도해 본 후에는 두 가지의 차이점을 알 수 없습니다. 그리고 이 비표준 CSS는 대부분의 모바일 브라우저와 Safari, Chrome 등 WebKit 코어가 탑재된 데스크톱 브라우저에만 적용됩니다. IE 시리즈는 직접 지원하지 않으니 탓하세요~

여기서 실제 효과를 살펴보겠습니다. 먼저 앤티앨리어싱 없이 렌더링됩니다.

다음 단계는 다음과 같습니다. -webkit-font-smoothing: subpixel-antialiased 앤티앨리어싱 렌더링 스무딩 후 효과:

글꼴 가장자리의 부드러움이 여전히 다른 것을 볼 수 있으며, 추가한 후 훨씬 더 좋아 보입니다. .

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

추천 학습:

css 비디오 튜토리얼

위 내용은 CSS에서 글꼴 다듬기를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!