我的轮廓文字出现异常（字体线出现在透明区域）

Question

我在网站上有一些轮廓文字，但由于某种原因，这些文字现在显示得很奇怪。查看下面的图片 link 了解更多详细信息。

规格：

WordPress 5.8.3
元素/专业版 3.5.3/3.5.1
字体：Sinkin Sans

这是代码（实际代码中没有 h1）

.cleartext {
  color: #000000;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000000;
}

.gbtext {
    font-weight: 700;
}

<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>

这就是我所看到的： the font lines are entering the space that should be transparent

Answer 1

是字体，Sinkin Sans。它不兼容。将其更改为 Helvetica 修复了它，它与 Sinkin 足够接近，大多数人可能不会注意到。

helvetica is a bit narrower and the periods/dots are squared, but not bad

Answer 2

是字体的问题。您可能无法做任何事情，并且此字体上的笔划就像您的 img 上一样。但是如果你使用 text-shadow 而不是 -webkit-text-stroke，它会有点 hack，但它应该可以工作。主要的缺点是文本不能透明，因为有阴影，它们会可见，所以你必须设置文本的颜色。

.cleartext {
  color: #fff;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
}

.gbtext {
    font-weight: 700;
}

<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>

我的轮廓文字出现异常（字体线出现在透明区域）

My outlined text is appearing weirdly (font lines are appearing in transparent area)

html

css

wordpress

webkit

elementor