css - fonts.com 的 Webfont 看起来太厚了

Question

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

这两个图像是相同的文本和相同的 CSS，除了不同的站点：

字体网：

我的网站：

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

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

Answer 1

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

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

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

您可以做的是使用 CSS 将其关闭：

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

正如您可能从 -webkit 供应商前缀中看出的那样，这仅适用于 Safari 和 Chrome。opacity: .99在Firefox for OSX 中有一些 hack-ish 方法可以禁用亚像素抗锯齿（如

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

Answer 2

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