fonts.com 的 Webfont 看起来太厚了答案

【问题标题】：Webfont from fonts.com are appearing too thickfonts.com 的 Webfont 看起来太厚了
【发布时间】：2012-12-22 18:01:00
【问题描述】：

我在使用 fonts.com 字体（尤其是 Avenir）时遇到问题。我试图向他们询问这个问题，但他们无法重现。

这两张图片的文本相同，CSS 相同，但网站不同：

Fonts.com：

我的网站：

这是在 Mac 上的 Chrome 上。 Firefox 没有那么糟糕，但还是有点厚。我还没有在IE中测试过，但我认为它不会有同样的问题。

那么是什么原因造成的呢？为什么在相同的浏览器/操作系统中表现不同？

【问题讨论】：

如果 Fonts.com 无法重现问题，我们可以用更多的信息怎么办？首先没有代码。
是的，可能有很多东西，你能把这些例子的代码贴出来吗？或者您可以降低网站上的字体粗细，使其看起来像 fonts.com
TBH，代码不会有帮助，所需的声明没有出现在检查器中。
fonts.com 将 -webkit-font-smoothing: antialiased 应用于 html 元素，因此它会影响整个页面。
默认情况下，检查器只会显示直接应用于该元素的样式。如果选择“计算样式”，可以看到继承样式等。

标签： css macos fonts webkit webfonts

【解决方案1】：

OSX 上的亚像素抗锯齿可以使字体看起来很粗。这似乎是这里的问题。

看看你发布的文字的放大照片：

看到文字周围的彩色边缘了吗？这就是亚像素抗锯齿。

您可以使用 CSS 将其关闭：

.yourtext {
  -webkit-font-smoothing: antialiased;
}

您可能从 -webkit 供应商前缀中可以看出，这仅适用于 Safari 和 Chrome。在 Firefox for OSX 中有一些 hack-ish 方法可以禁用亚像素抗锯齿（例如 opacity: .99），但我不知道它们是否是个好主意。

我有点惊讶 Fonts.com 没有意识到这一点，特别是因为他们自己禁用了亚像素抗锯齿。

【讨论】：

非常感谢，你帮我省了很多麻烦的朋友。
除了-webkit-font-smoothing: antialiased;，有些人可能会发现text-rendering: optimizeLegibility;和-moz-osx-font-smoothing: grayscale的类型也有所改进。

【解决方案2】：

另外，如果您已按照 Chris Herbert 的说明设置字体抗锯齿，但问题仍然存在，请确保在使用 @font-face... 声明字体时，您已将值设置为 font-weight 而不是 font-weight: normal;。 font-weight: 600; 似乎在我的情况下效果最好，而所有其他结果都是相同的仿粗体类型。

【讨论】：