가변 글꼴을 사용할 때 -webkit-text-Stroke CSS 속성으로 브라우저 불일치를 해결하는 방법

텍스트 스트로크(-webkit-text-Stroke) CSS 문제

NextJs와 함께 개인 프로젝트 작업 중 개발자인 TailwindCSS는 -webkit-text-Stroke CSS 속성을 사용하여 텍스트 스트로크에 문제가 발생했습니다.

개인 탐색기를 사용하여 진행 상황을 검토한 결과 텍스트가 Chrome을 제외한 모든 브라우저에서 스트로크가 의도한 대로 작동하지 않았습니다. 원하는 획이 보였지만, 브라우저마다 다르게 나타났습니다.

사용된 코드는 다음과 같습니다:

.outline-title {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

문제를 조사한 결과 다음이 발견되었습니다:

-webkit-text-Stroke가 가변 글꼴에서 제대로 작동하지 않습니다

가중치, 늘이기 등 글꼴 속성을 사용자 정의할 수 있는 가변 글꼴은 -webkit-text-Stroke 속성을 방해할 수 있습니다.

Quickfix/업데이트 2024: HTML 텍스트

이혁준이 제안한 대로 페인트 순서 속성을 HTML 텍스트 요소에 적용하면 모든 주요 렌더링 엔진의 문제가 해결됩니다. .

.outline {
  -webkit-text-stroke: 0.04em black;
  paint-order: stroke fill;
}

이렇게 하면 채우기 색상 뒤의 텍스트 획이 효과적으로 렌더링됩니다.

위 내용은 가변 글꼴을 사용할 때 -webkit-text-Stroke CSS 속성으로 브라우저 불일치를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!