我在使用 fonts.com 字体（特别是 Avenir）时遇到问题。我试图向他们询问这个问题，但他们无法重现它。
这两个图像是相同的文本和相同的 CSS，除了不同的站点：
字体网：
我的网站：
这是在 Mac 上的 Chrome 上。Firefox 没有那么糟糕，但还是有点厚。我还没有在 IE 中测试过，但我认为它不会有同样的问题。
那么是什么原因造成的呢？为什么在同一个浏览器/操作系统中表现不同？
问问题
5250 次
2 回答
12
OSX 上的亚像素抗锯齿可以使字体看起来很粗。这似乎是这里的问题。
看看您发布的文字的放大照片：
看到文字周围的彩色边缘了吗？那是亚像素抗锯齿。
您可以做的是使用 CSS 将其关闭：
.yourtext {
-webkit-font-smoothing: antialiased;
}
正如您可能从 -webkit 供应商前缀中看出的那样，这仅适用于 Safari 和 Chrome。opacity: .99在Firefox for OSX 中有一些 hack-ish 方法可以禁用亚像素抗锯齿（如
我有点惊讶 Fonts.com 没有意识到这一点，特别是因为他们自己禁用了亚像素抗锯齿。
于 2013-01-08T19:33:10.683 回答
0
此外，如果您已按照 Chris Herbert 的说明设置字体抗锯齿，但问题仍然存在，请确保在使用 声明字体时@font-face...，您已将值设置为font-weight而不是font-weight: normal;。font-weight: 600;在我的情况下似乎效果最好，而所有其他结果都是相同的仿粗体类型。
于 2014-07-23T00:32:25.900 回答