Can Variable Fonts Cause Discrepancies in Text Stroke Rendering with -webkit-text-stroke CSS Property?

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

In a project using NextJs and TailwindCSS, users encountered an issue where the text stroke (-webkit-text-stroke) rendered differently across browsers, with inconsistent results especially in browsers other than Chrome.

Problem Description:

The desired stroke effect was not achieved, resulting in either no stroke or an overly thick and undesirable appearance, as depicted in the provided images.

Code Snippet:

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

Root Cause:

Investigation revealed that the issue stemmed from the incompatibility of variable fonts with the -webkit-text-stroke property. This problem mostly affects browsers that support variable fonts, such as Firefox, Safari, and Edge. Chrome, which does not fully support variable fonts, exhibited the desired stroke effect as expected.

Quickfix/Update 2024:

Apply Paint-Order to HTML Text

A resolution to this issue involves applying the paint-order property to HTML text elements. This property, previously undefined for HTML text, now allows for control over the rendering order of stroke and fill, resulting in the desired stroke effect.

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

By setting the paint-order to "stroke fill," the stroke is rendered behind the text fill, achieving the desired outline effect. This solution is cross-browser compatible, working effectively in all major browsers, including Firefox, Safari, Edge, and Chrome.

The above is the detailed content of Can Variable Fonts Cause Discrepancies in Text Stroke Rendering with -webkit-text-stroke CSS Property?. For more information, please follow other related articles on the PHP Chinese website!