来自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并不知道这一点,特别是因为他们自己禁用了亚像素抗锯齿.