文字描边 (-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

由于浏览器兼容性问题 -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 2

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

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

Answer 3

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

正如@diopside 所指出的那样，这种呈现行为 与可变字体有关。
这些内部轮廓的原因是基于一些可变字体的结构。

'Traditional' 字体（所以在可变字体之前）——只包含一个轮廓形状，也许还有一个反形状，例如小写字母 [=32= 的内部切出 'hole' ]e 字形.

否则，您会遇到意外的 even/odd 问题，导致路径区域重叠导致排除形状。

应用这种构造方法，你将永远不会看到任何形状的重叠。您可以将它们想象成 'merged down' 复合路径。像前面提到的洞这样的反形状是基于简单的规则，比如逆时针路径方向——顺便说一句。您可能仍然会在 svg-clipping paths 中遇到这个概念——在某些浏览器中无法完美呈现。

但可变字体允许 segemented/overlapping 构造 glyphs/characters 以促进不同字体粗细和宽度之间的插值。

显然 webkit-text-stroke 勾勒出 glyph/character 的精确贝塞尔解剖结构，导致每个字形组件出现不需要的轮廓。

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

文字描边 (-webkit-text-stroke) css 问题

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

css

frontend

sass

next.js

tailwind-css