So beheben Sie Browser-Diskrepanzen mit der CSS-Eigenschaft -webkit-text-Stroke bei der Verwendung variabler Schriftarten

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

Arbeiten an einem persönlichen Projekt mit NextJs und TailwindCSS, ein Entwickler, ist bei der Verwendung der CSS-Eigenschaft -webkit-text-Stroke auf ein Problem mit dem Textstrich gestoßen.

Bei der Verwendung eines privaten Navigators zur Überprüfung des Fortschritts stellten sie fest, dass der Text Stroke funktionierte nicht in allen Browsern außer Chrome wie vorgesehen. Der gewünschte Strich war sichtbar, erschien jedoch in verschiedenen Browsern unterschiedlich.

Der verwendete Code war wie folgt:

.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;
}

Nach der Untersuchung des Problems wurde festgestellt, dass:

-webkit-text-Stroke mit variablen Schriftarten nicht gut funktioniert

Variable Schriftarten, die die Anpassung von Schrifteigenschaften wie Stärke und Dehnung ermöglichen, können die Eigenschaft -webkit-text-Stroke beeinträchtigen.

Quickfix/Update 2024: Paint-Order auf HTML-Text anwenden

Wie von HyoukJoon Lee vorgeschlagen, wird das Problem in allen wichtigen Rendering-Engines durch Anwenden der Paint-Order-Eigenschaft auf HTML-Textelemente behoben .

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

Dadurch wird der Textstrich hinter der Füllfarbe effektiv gerendert.

Das obige ist der detaillierte Inhalt vonSo beheben Sie Browser-Diskrepanzen mit der CSS-Eigenschaft -webkit-text-Stroke bei der Verwendung variabler Schriftarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!