文字描边（-webkit-text-stroke）css问题

Question

我正在使用 NextJs 和 TailwindCSS 开展个人项目。

完成项目后，我使用私人导航器查看进度，但似乎笔画无法正常工作，我在除 Chrome 之外的所有浏览器中都遇到了这种情况。

这是我得到的：

这是所需的行为：

代码：

<div className="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

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

谁能解释或帮助解决这个问题。

浏览器兼容性：

Answer 1

TL:DR
@Satheesh Kumar 提出的 text-shadow 仍然是最可靠的解决方案。

正如@diopside：指出这种渲染行为与可变字体有关。
这些内部轮廓的原因是基于一些可变字体的结构。

“传统”字体（因此在可变字体之前）——仅包含轮廓形状和可能的反形状，例如小写的切出内部“孔”e字形。

否则，您会遇到不希望出现的偶数/奇数问题，从而导致重叠路径区域导致形状被排除在外。

应用这种构造方法，您将永远不会看到任何形状的重叠。您可以将它们想象成相当“合并”的复合路径。像前面提到的孔这样的计数器形状是基于简单的规则，比如逆时针路径方向——顺便说一句。您可能仍会在 svg 剪切路径中遇到此概念 - 在某些浏览器中无法完美呈现）。

然而，可变字体允许字形/字符的分段/重叠构造，以促进不同字体粗细和宽度之间的插值。

显然webkit-text-stroke 勾勒出字形/字符的精确贝塞尔结构，从而导致每个字形组件的轮廓不理想。

这本身不是可变字体的问题，因为在字体设计中使用粗细和宽度插值至少 25 年。所以这个古怪的渲染问题取决于使用的字体——许多经典/旧字体编译为较新的可变字体格式仍将依赖于老式方法（避免任何重叠）。

Answer 2

由于浏览器兼容性，-webkit-text-stroke 将在少数浏览器中不支持。可以通过阴影来实现轮廓效果。

希望这行得通！

.outline-title {
font-family: sans-serif;
   color: white;
   text-shadow:
       1px 1px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
      font-size: 50px;
}

<div class="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

---- 更新 ---

Answer 3

在某些浏览器中使用可变宽度字体时，这是一个已知问题。至于为什么，我不知道

https://github.com/rsms/inter/issues/292#issuecomment-674993644