css - 来自 fonts.com 的 Webfont 显得太粗了

Question

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

除了网站不同，这两张图片的文字相同，CSS 相同:

Fonts.com:

我的网站:

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

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

Answer 1

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

看看这张你发布的文字的放大图:

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

您可以使用 CSS 将其关闭:

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

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

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