来自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。有一些hack-ish方法可以在Firefox for OSX中禁用子像素抗锯齿（如opacity: .99），但我不知道它们是不是一个好主意。

我有点惊讶Fonts.com并不知道这一点，特别是因为他们自己禁用了亚像素抗锯齿。

Answer 2

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