next.js 文本笔划(-webkit-text-stroke)css问题

mlmc2os5 于 2022-11-23 发布在其他

关注(0)|答案(5)|浏览(186)

我正在与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;
}

有人能解释或帮助解决这个问题吗？
浏览器兼容性：

next.js

来源：https://stackoverflow.com/questions/69253420/text-stroke-webkit-text-stroke-css-problem

5条答案

按热度按时间

r6hnlfcb1#

TL;DR：`-webkit-text-stroke`仍然无法预测

由SatheeshKumar提出的text-shadow可能是最可靠的解决方案。
@Luke Taylor的方法--将文本复制到背景伪元素--也提供了一个很好的解决方案。

剖析可变字体

如透辉石：指出此渲染行为与可变字体有关。
这些内部轮廓的原因是基于某些可变字体的结构。
“传统”字体（所以在可变字体之前）-只包含一个轮廓形状，可能是一个计数器形状，例如，一个小写***e***字形的内部“孔”。
否则，您可能会遇到意外的偶数/奇数问题，导致因重叠路径区域而导致形状被排除。
应用这种构造方法，你永远不会看到任何形状的重叠。你可以把它们想象成“向下合并”的复合路径。像前面提到的洞这样的计数器形状是基于简单的规则，比如逆时针路径方向-顺便说一句。你可能仍然会在SVG剪辑路径中遇到这个概念-在某些浏览器中不能完美呈现）。

然而，可变字体允许字形/字符的分段/重叠构造，以便于不同字体粗细和宽度之间的插值。
显然，webkit-text-stroke精确地描绘了字形/字符的贝塞尔曲线，导致每个字形组件都有不希望的轮廓。
这本身并不是可变字体的问题，因为粗细和宽度插值在字体设计中已经使用了至少25年。所以这个奇怪的渲染问题取决于所使用的字体--许多编译成新的可变字体格式的经典/旧字体仍然依赖于老式的方法（避免任何重叠）。