Is -webkit-text-stroke Causing Variable Font Rendering Discrepancies in Text Stroke?

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

Diagnosis: -webkit-text-stroke Marginal Support for Variable Fonts

When encountering discrepancies in text stroke rendering across different browsers, the issue may lie with the interaction between -webkit-text-stroke and variable fonts.

Quick Fix: Update 2024 - Paint Order for HTML Text

To resolve this, we leverage the CSS paint-order property, which allows us to control the rendering order of fill and stroke. By setting paint-order: stroke fill, we prioritize the stroke over the text color, creating the desired effect.

Implementation:

Add the following CSS rule to your stylesheet:

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

The above is the detailed content of Is -webkit-text-stroke Causing Variable Font Rendering Discrepancies in Text Stroke?. For more information, please follow other related articles on the PHP Chinese website!