我的轮廓文字出现奇怪（字体线出现在透明区域）答案

【问题标题】：My outlined text is appearing weirdly (font lines are appearing in transparent area)我的轮廓文字出现奇怪（字体线出现在透明区域）
【发布时间】：2022-01-13 02:49:59
【问题描述】：

我在网站上有一些大纲文字，但由于某种原因，这些文字现在看起来很奇怪。查看下面的图片链接了解更多详情。

规格：

WordPress 5.8.3
Elementor / Pro 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;
}

&lt;h1&gt;&lt;span class="cleartext gbtext"&gt;It's clear&lt;/span&gt; when you blah blah blah.&lt;/h1&gt;

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

【问题讨论】：

您是否为那些没有您的特定非标准字体许可证的人提供备用字体？
您是从许可还是开发的角度提问？如果开发，字体有.woff、.woff2、.ttf和.eot。

标签： html css wordpress webkit elementor

【解决方案1】：

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

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

【讨论】：

【解决方案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;
}

&lt;h1&gt;&lt;span class="cleartext gbtext"&gt;It's clear&lt;/span&gt; when you blah blah blah.&lt;/h1&gt;

【讨论】：