Comment résoudre les divergences du navigateur avec la propriété CSS -webkit-text-Stroke lors de l'utilisation de polices variables

Text Stroke (-webkit-text-Stroke) Problème CSS

Travailler sur un projet personnel avec NextJs et TailwindCSS, un développeur a rencontré un problème avec le trait de texte à l'aide de la propriété CSS -webkit-text-Stroke.

En utilisant un navigateur privé pour examiner la progression, ils ont observé que le texte Stroke ne fonctionnait pas comme prévu dans tous les navigateurs à l'exception de Chrome. Le trait souhaité était visible, mais il apparaissait différemment selon les navigateurs.

Le code utilisé était le suivant :

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

Après avoir étudié le problème, il a été découvert que :

-webkit-text-Stroke ne fonctionne pas correctement avec les polices variables

Les polices variables, qui permettent de personnaliser les propriétés de la police telles que l'épaisseur et l'étirement, peuvent interférer avec la propriété -webkit-text-stroke.

Quickfix/Update 2024 : Appliquer l'ordre de peinture au texte HTML

Comme suggéré par HyoukJoon Lee, l'application de la propriété paint-order aux éléments de texte HTML résout le problème dans tous les principaux moteurs de rendu. .

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

Cela restitue efficacement le trait de texte derrière la couleur de remplissage.

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!