可变字体是否会导致 -webkit-text-lines CSS 属性的文本描边渲染出现差异？

文本描边 (-webkit-text-lines) CSS 问题

在使用 NextJs 和 TailwindCSS 的项目中，用户遇到了文本描边 (-webkit- text-lines）在不同浏览器中呈现的效果不同，特别是在 Chrome 以外的浏览器中，结果不一致。

问题描述：

没有达到预期的描边效果，导致要么没有笔画，要么外观过厚且不受欢迎，如所提供的图像所示。

代码片段：

<code class="html"><div classname="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
  Values &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>

根本原因:

调查显示，该问题源于可变字体与 -webkit-text-lines 属性不兼容。此问题主要影响支持可变字体的浏览器，例如 Firefox、Safari 和 Edge。不完全支持可变字体的 Chrome 表现出了预期的笔画效果。

Quickfix/Update 2024：

将 Paint-Order 应用于 HTML Text

此问题的解决方案涉及将绘制顺序属性应用于 HTML 文本元素。此属性以前未针对 HTML 文本定义，现在允许控制描边和填充的渲染顺序，从而产生所需的描边效果。

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

通过将绘制顺序设置为“描边填充”，描边渲染在文本填充后面，实现所需的轮廓效果。该解决方案跨浏览器兼容，可在所有主要浏览器中有效运行，包括 Firefox、Safari、Edge 和 Chrome。

以上是可变字体是否会导致 -webkit-text-lines CSS 属性的文本描边渲染出现差异？的详细内容。更多信息请关注PHP中文网其他相关文章！