在 WebKit 中加强单调文本

在 CodePen 上进行一些跨浏览器探查时，我注意到代码编辑器的字体在 WebKit 浏览器（Safari 和 Chrome）中明显比 Firefox 或 Opera 中更暗淡、更弱。 我很喜欢 Chrome，知道我会花很多时间看着看起来质量较差的文本，这让我感到难过，所以我开始寻找解决方案。

这是“之前”的照片

过去有 文本阴影技巧，但现在它不再起作用，实际上是用于使文本变薄，而不是更粗。 然后有 -webkit-font-smoothing 内容 可以玩。 但在那里没有骰子。 none 值看起来很糟糕，在这种情况下，antialiased 和 subpixel-antialiased 之间没有视觉差异。

答案照常出现在 Twitter 上！

@chriscoyier 试试 -webkit-text-stroke: 0.35px

— Kevin Ennis (@kevincennis) 2012 年 7 月 11 日

将此添加到文本中显着地增强了文本。 仍然没有 Opera 或 Firefox 那么明亮和锐利，但更接近了。 由于该效果使用 -webkit- 供应商前缀应用，所以我无需担心它会影响其他浏览器。

我很自豪，这将解决问题，一切都将变得美好。 当然，我醒来收到这样的邮件

嘿，

我在 Chrome 上看到了文本的更改，它真的让你头痛，太模糊了。

啊，互联网。 你能做什么呢？

更新

来自此的反馈大约是 50/50。 有些人讨厌“伪粗体”（我认为这并不真正是伪粗体，但我理解），有些人更喜欢细文本，有些人更喜欢尝试亮度。

这里有内幕。 最上面的屏幕截图中的细文本并不是“这就是 WebKit 的工作方式”的结果，而是因为文本同一父元素中的一个元素应用了 CSS 3D 变换。 即，transform: translate3d(0, 0, 0)。 这里最大的讽刺是，该代码是为了**防止**文本在 CSS 过渡发生时出现“变薄”的外观而应用的，这是 CSS 过渡的一个奇怪的副作用。 虽然它奏效了，但也导致编辑器中的文本一直都呈现出“变薄”的外观。

因此，在 CodePen 中，我已经删除了 -webkit-text-stroke，因此文本渲染看起来好多了，并且与 Opera 和 Firefox 更具可比性。 然后，我更仔细地将 3D 变换修复应用于过渡期间需要帮助的其他元素。