-webkit-text-stroct CSS プロパティを使用したテキスト ストロークのレンダリングで、可変フォントが不一致を引き起こす可能性がありますか?

テキスト ストローク (-webkit-text-ストローク) CSS の問題

NextJs と TailwindCSS を使用するプロジェクトで、テキスト ストローク (-webkit- text-ストローク) がブラウザ間で異なってレンダリングされ、特に 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-ストローク プロパティの非互換性に起因することが判明しました。この問題は主に、Firefox、Safari、Edge など、可変フォントをサポートするブラウザに影響します。可変フォントを完全にはサポートしていない Chrome では、期待どおりのストローク効果が得られました。

クイックフィックス/アップデート 2024:

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-stroct CSS プロパティを使用したテキスト ストロークのレンダリングで、可変フォントが不一致を引き起こす可能性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。