首頁 > web前端 > css教學 > 使用可變字體時如何解決瀏覽器與 -webkit-text-lines CSS 屬性的差異

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

Mary-Kate Olsen
發布: 2024-10-24 02:47:02
原創
382 人瀏覽過

How to Resolve Browser Discrepancies with -webkit-text-stroke CSS Property When Using Variable Fonts

文字描邊(-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中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板