可変フォントの使用時に -webkit-text-ストローク CSS プロパティを使用してブラウザーの不一致を解決する方法

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

NextJs と個人プロジェクトに取り組んでいますTailwindCSS では、開発者は -webkit-text-ストローク 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-ストロークは可変フォントではうまく機能しません

太さや伸縮などのフォント プロパティのカスタマイズを可能にする可変フォントは、-webkit-text-ストローク プロパティと干渉する可能性があります。

クイックフィックス/アップデート 2024: HTML テキストにペイント オーダーを適用する

HyoukJoon Lee が提案したように、ペイント オーダー プロパティを HTML テキスト要素に適用すると、すべての主要なレンダリング エンジンの問題が解決されます。 .

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

これにより、塗りつぶし色の背後にあるテキスト ストロークが効果的にレンダリングされます。

以上が可変フォントの使用時に -webkit-text-ストローク CSS プロパティを使用してブラウザーの不一致を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。