html - 在 Chrome 和 Firefox 中匹配 "Helvetica Neue"

Question

我目前正在开发的网站上使用 Helvetica Neue。在过去的几个月里，我注意到 Helvetica Neue 字体在 Google Chrome 中呈现得非常粗。在 Firefox 中查看同一站点时，一切看起来都好得多，符合预期。

这里有一张对比截图供引用:

这部分的 CSS 规则相当简单:

#top-bar {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 30px;
    color: #ccc;
    font-size: 80%;
    line-height: 30px;
}

#top-bar a {
    color: #eee;
}

谁能解释一下为什么两种浏览器中的字体看起来如此不同？尽管 font-weight: normal 没有效果，但看起来 Chrome 似乎正在渲染更重的字体粗细。这也不是该站点独有的。任何使用 Helvetica Neue 的网站(包括 Bootstrap Docs)在我的电脑(以及其他运行 Chrome 的电脑)上都会遇到这个问题。在 Mac 上一切看起来都很好。

有解决办法吗？例如，一些模仿 FF 在 Chrome 中呈现字体的技术？

Answer 1

这是因为 Firefox 支持硬件加速的 DirectWrite API(Direct2D 的一部分)来呈现字体，而 Chrome 不支持。参见示例:

• Chrome Issue 25541
• Chrome Issue 124406

即使您在 Firefox 中关闭硬件加速，结果也会不同，因为这两种浏览器使用不同的字体渲染后端。