가변 글꼴로 인해 -webkit-text-Stroke CSS 속성을 사용하는 텍스트 스트로크 렌더링에 불일치가 발생할 수 있습니까?

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

NextJs 및 TailwindCSS를 사용하는 프로젝트에서 사용자는 텍스트 스트로크(-webkit- 텍스트 획)이 브라우저마다 다르게 렌더링되어 특히 Chrome 이외의 브라우저에서 일관되지 않은 결과가 나타납니다.

문제 설명:

원하는 획 효과를 얻지 못하여 결과적으로 제공된 이미지에 표시된 대로 획이 없거나 지나치게 두껍고 바람직하지 않은 모양입니다.

코드 조각:

<code class="html"><div className="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
  Values &amp;amp; Process
</div></code>

<code class="css">.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;
}</code>

근본 원인 :

조사 결과 이 ​​문제는 -webkit-text-Stroke 속성과 가변 글꼴의 비호환성으로 인해 발생하는 것으로 나타났습니다. 이 문제는 주로 Firefox, Safari, Edge 등 가변 글꼴을 지원하는 브라우저에 영향을 미칩니다. 가변 글꼴을 완벽하게 지원하지 않는 Chrome에서는 예상대로 원하는 획 효과가 나타났습니다.

Quickfix/Update 2024:

HTML에 페인트 순서 적용 텍스트

이 문제를 해결하려면 HTML 텍스트 요소에 페인트 순서 속성을 적용해야 합니다. 이전에 HTML 텍스트에 대해 정의되지 않았던 이 속성을 사용하면 이제 획 및 채우기의 렌더링 순서를 제어하여 원하는 획 효과를 얻을 수 있습니다.

<code class="css">h1 {
  -webkit-text-stroke: 0.02em black;
  color: #fff;
  font-stretch: 0%;
  font-weight: 200;
}

/* render stroke behind text-fill color */

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

페인트 순서를 "획 채우기"로 설정하면 획은 텍스트 채우기 뒤에 렌더링되어 원하는 윤곽선 효과를 얻습니다. 이 솔루션은 브라우저 간 호환 가능하며 Firefox, Safari, Edge 및 Chrome을 포함한 모든 주요 브라우저에서 효과적으로 작동합니다.

위 내용은 가변 글꼴로 인해 -webkit-text-Stroke CSS 속성을 사용하는 텍스트 스트로크 렌더링에 불일치가 발생할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!