Comment corriger l’apparence incohérente des traits de texte dans différents navigateurs ?

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

Lors de l'utilisation de la propriété CSS -webkit-text-Stroke, certains utilisateurs peuvent rencontrer des problèmes avec l'apparence du trait sur des navigateurs autres que Chrome. Ce problème, particulièrement répandu dans les navigateurs qui ne prennent pas entièrement en charge les polices variables, peut entraîner l'apparition d'un trait incohérent avec le comportement souhaité.

Correction rapide/Mise à jour 2024 : ordre de peinture pour le texte HTML< /h3>

Comme suggéré par HyoukJoon Lee, l'application de la propriété SVG paint-order aux éléments de texte HTML peut résoudre efficacement ce problème. Contre-intuitivement, la propriété paint-order, qui détermine l'ordre dans lequel les éléments sont peints, peut être appliquée au texte HTML, comme en témoigne la prise en charge par tous les principaux moteurs de rendu.

En tirant parti de l'ordre de peinture, le trait peut être rendu derrière la couleur de remplissage du texte, similaire au comportement souhaité dans Chrome. La mise en œuvre de ce correctif nécessite de modifier le CSS comme suit :

.outline {
 -webkit-text-trave: 0.04em black;
 paint-order: trait 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!