使用可變字體時如何解決瀏覽器與 -webkit-text-lines CSS 屬性的差異

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

使用NextJs 和處理個人專案TailwindCSS，開發人員使用-webkit-text-lines 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-lines 與可變字體配合得不好

允許自訂字體屬性（例如粗細和拉伸）的變數字體可能會幹擾-webkit -text-lines 屬性。

快速修復/更新2024：將繪製順序應用於HTML 文字

根據HyukJoon Lee 的建議，將繪製順序屬性應用於HTML 文字元素可以解決所有主要渲染引擎中的問題.

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

這可以有效地渲染填充顏色後面的文字描邊。

以上是使用可變字體時如何解決瀏覽器與 -webkit-text-lines CSS 屬性的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！