可變字體是否會導致 -webkit-text-lines CSS 屬性的文字描邊渲染出現差異？

文字描邊(-webkit-text-lines) CSS 問題

在使用NextJs 和TailwindCSS 的專案中，使用者遇到了文字描邊(-webkit- text-lines）在不同瀏覽器中呈現的效果不同，特別是在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-lines 屬性不相容。此問題主要影響支援可變字體的瀏覽器，例如 Firefox、Safari 和 Edge。不完全支援可變字體的 Chrome 表現出了預期的筆畫效果。

Quickfix/Update 2024：

將Paint-Order 應用於HTML Text

此問題的解決方案涉及將繪製順序屬性套用於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-lines CSS 屬性的文字描邊渲染出現差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！