1

我目前在我正在开发的网站上使用 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;
}

谁能解释为什么字体在两个浏览器中看起来如此不同？看起来 Chrome 正在渲染更重的字体重量，即使font-weight: normal没有效果。这也不是本网站独有的。任何使用 Helvetica Neue 的网站（包括 Bootstrap Docs）都会在我的电脑（以及其他运行 Chrome 的电脑）上出现这种情况。在 Mac 上一切看起来都很好。

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

4

1 回答 1

1

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

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

于 2013-10-17T10:24:23.020 回答