在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）都会在我的PC（以及其他运行Chrome的用户）上遭受此问题。 Mac上的一切看起来都很好。

有解决方案吗？例如，某些技术可以模仿FF在Chrome中呈现字体？

Answer 1

这是因为Firefox支持硬件加速的DirectWrite API（Direct2D的一部分）来渲染字体而Chrome不支持。例如见：

• Chrome Issue 25541
• Chrome Issue 124406

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