Verursacht -webkit-text-Stroke Diskrepanzen bei der Darstellung variabler Schriftarten im Textstrich?

Text Stroke (-webkit-text-Stroke) CSS-Problem

Diagnose: -webkit-text-Stroke Geringe Unterstützung für variable Schriftarten

Wenn Unterschiede bei der Textstrichwiedergabe in verschiedenen Browsern auftreten, liegt das Problem möglicherweise an der Interaktion zwischen -webkit-text-Stroke und variablen Schriftarten.

Schnelllösung: Update 2024 – Malreihenfolge für HTML-Text

Um dieses Problem zu beheben, nutzen wir die CSS-Eigenschaft „paint-order“, mit der wir die Renderreihenfolge von Füllung und Strich steuern können . Durch Festlegen der Farbreihenfolge: Strichfüllung geben wir dem Strich Vorrang vor der Textfarbe und erzeugen so den gewünschten Effekt.

Implementierung:

Fügen Sie das folgende CSS hinzu Regel zu Ihrem Stylesheet:

<code class="css">.outline {
  -webkit-text-stroke: 0.04em black;
  paint-order: stroke fill;
}</code>

Das obige ist der detaillierte Inhalt vonVerursacht -webkit-text-Stroke Diskrepanzen bei der Darstellung variabler Schriftarten im Textstrich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!