Können variable Schriftarten zu Diskrepanzen bei der Darstellung von Textstrichen mit der CSS-Eigenschaft -webkit-text-Stroke führen?

CSS-Problem mit Textstrich (-webkit-text-Stroke)

In einem Projekt mit NextJs und TailwindCSS stießen Benutzer auf ein Problem, bei dem der Textstrich (-webkit- Textstrich) wird in allen Browsern unterschiedlich gerendert, mit inkonsistenten Ergebnissen, insbesondere in anderen Browsern als Chrome.

Problembeschreibung:

Der gewünschte Stricheffekt wurde nicht erreicht, was zu Entweder kein Strich oder ein übermäßig dickes und unerwünschtes Erscheinungsbild, wie in den bereitgestellten Bildern dargestellt.

Codeausschnitt:

<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>

Ursache :

Die Untersuchung ergab, dass das Problem auf die Inkompatibilität variabler Schriftarten mit der Eigenschaft -webkit-text-Stroke zurückzuführen ist. Dieses Problem betrifft hauptsächlich Browser, die variable Schriftarten unterstützen, wie Firefox, Safari und Edge. Chrome, das variable Schriftarten nicht vollständig unterstützt, zeigte wie erwartet den gewünschten Stricheffekt.

Quickfix/Update 2024:

Paint-Order auf HTML anwenden Text

Eine Lösung für dieses Problem besteht darin, die Eigenschaft „paint-order“ auf HTML-Textelemente anzuwenden. Diese bisher für HTML-Text nicht definierte Eigenschaft ermöglicht nun die Steuerung der Renderreihenfolge von Strich und Füllung, was zum gewünschten Stricheffekt führt.

<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>

Durch Festlegen der Malreihenfolge auf „Strichfüllung“ Der Strich wird hinter der Textfüllung gerendert, wodurch der gewünschte Umrisseffekt erzielt wird. Diese Lösung ist browserübergreifend kompatibel und funktioniert effektiv in allen gängigen Browsern, einschließlich Firefox, Safari, Edge und Chrome.

Das obige ist der detaillierte Inhalt vonKönnen variable Schriftarten zu Diskrepanzen bei der Darstellung von Textstrichen mit der CSS-Eigenschaft -webkit-text-Stroke führen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!