Les polices variables peuvent-elles provoquer des divergences dans le rendu des traits de texte avec la propriété CSS -webkit-text-Stroke ?

Problème CSS de trait de texte (-webkit-text-Stroke)

Dans un projet utilisant NextJs et TailwindCSS, les utilisateurs ont rencontré un problème où le trait de texte (-webkit- text-stroke) rendu différemment selon les navigateurs, avec des résultats incohérents, en particulier dans les navigateurs autres que Chrome.

Description du problème :

L'effet de trait souhaité n'a pas été obtenu, ce qui a entraîné soit aucun trait, soit une apparence trop épaisse et indésirable, comme le montrent les images fournies.

Extrait de code :

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

Cause fondamentale :

L'enquête a révélé que le problème provenait de l'incompatibilité des polices variables avec la propriété -webkit-text-stroke. Ce problème affecte principalement les navigateurs prenant en charge les polices variables, tels que Firefox, Safari et Edge. Chrome, qui ne prend pas entièrement en charge les polices variables, a présenté l'effet de trait souhaité comme prévu.

Quickfix/Update 2024 :

Appliquer Paint-Order au HTML Text

Une résolution de ce problème consiste à appliquer la propriété paint-order aux éléments de texte HTML. Cette propriété, auparavant non définie pour le texte HTML, permet désormais de contrôler l'ordre de rendu du trait et du remplissage, ce qui donne l'effet de trait souhaité.

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

En définissant l'ordre de peinture sur « remplissage de trait », le trait est rendu derrière le remplissage du texte, obtenant ainsi l'effet de contour souhaité. Cette solution est compatible avec tous les navigateurs et fonctionne efficacement dans tous les principaux navigateurs, notamment Firefox, Safari, Edge et Chrome.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!