How to Resolve Browser Discrepancies with -webkit-text-stroke CSS Property When Using Variable Fonts

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

Working on a personal project with NextJs and TailwindCSS, a developer encountered an issue with the text stroke using -webkit-text-stroke CSS property.

Upon using a private navigator to review progress, they observed that the text stroke was not functioning as intended in all browsers except Chrome. The desired stroke was visible, but it appeared differently across various browsers.

The code used was as follows:

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

After investigating the issue, it was discovered that:

-webkit-text-stroke Doesn't Work Well with Variable Fonts

Variable fonts, which allow for customization of font properties such as weight and stretch, can interfere with the -webkit-text-stroke property.

Quickfix/Update 2024: Apply paint-order to HTML Text

As suggested by HyoukJoon Lee, applying the paint-order property to HTML text elements resolves the issue in all major rendering engines.

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

This effectively renders the text stroke behind the fill color.

The above is the detailed content of How to Resolve Browser Discrepancies with -webkit-text-stroke CSS Property When Using Variable Fonts. For more information, please follow other related articles on the PHP Chinese website!