Css fonts.com上的Webfont看起来太厚

我对fonts.com字体（特别是Avenir）有问题。我试着问他们这个问题，但他们无法重现

这两个图像具有相同的文本和相同的CSS，但不同的站点除外：

font.com:

我的网站：

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

---

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

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

请看您发布的这张放大的文字快照：

看到文本周围的边缘颜色了吗？这是亚像素抗锯齿

您可以使用CSS将其关闭：

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

正如您可能从-webkit供应商前缀中看到的，这只适用于Safari和Chrome。在Firefox for OSX中有一些骇人的禁用亚像素抗锯齿的方法（比如

不透明度：.99

），但我不知道它们是否是个好主意

---

我有点惊讶Fonts.com没有意识到这一点，特别是因为他们自己正在禁用亚像素消除混叠。

此外，如果您已经按照Chris Herbert的解释设置了字体消除混叠，但问题仍然存在，请确保在声明具有

@font-face…

字体时，您已将值设置为

font-weight

，而不是

font-weight:normal<代码>字体大小：600

在我的情况下似乎效果最好，而所有其他的结果都是相同的人造粗体。

如果Fonts.com无法重现这个问题，我们可以用更少的信息做什么？首先，没有代码。是的，可能有很多东西，你能把这些示例的代码发布到哪里吗。或者，您可以降低网站上的字体重量，使其看起来像fonts.comTBH，代码不会有帮助，所需的声明不会出现在inspector.fonts.com应用-webkit字体平滑：html元素的抗锯齿，默认情况下，检查器只显示直接应用于该元素的样式。如果您选择“计算样式”，您可以看到继承的样式等。非常感谢您，您为我节省了很多麻烦，朋友。除了

-webkit字体平滑：抗锯齿一些人可能会发现，通过
文本呈现，类型也有所改进：优化易读性和
-moz osx字体平滑：灰度
。