我遇到fonts.com字体(特别是Avenir)的问题。我试图向他们询问这个问题,但他们无法重现它。
除了不同的网站外,这两张图片的文字相同,CSS相同:
Fonts.com:
我的网站:
这是在Mac上的Chrome上。 Firefox并没有那么糟糕,但仍然有点厚。我还没有在IE中测试它,但我认为它不会有同样的问题。
那是什么导致了这个?为什么在同一浏览器/操作系统中表现不同?
答案 0 :(得分:12)
OSX上的子像素抗锯齿可以使字体看起来非常大胆。这似乎是这里的问题。
看看你发布的文字的爆炸性镜头:
看到文字周围的颜色?这是亚像素抗锯齿。
您可以使用CSS将其关闭:
.yourtext {
-webkit-font-smoothing: antialiased;
}
正如您可以从-webkit供应商前缀中看到的那样,这只适用于Safari和Chrome。有一些hack-ish方法可以在Firefox for OSX中禁用子像素抗锯齿(如opacity: .99
),但我不知道它们是不是一个好主意。
我有点惊讶Fonts.com并不知道这一点,特别是因为他们自己禁用了亚像素抗锯齿。
答案 1 :(得分:0)
此外,如果你已经设置了字体抗锯齿,Chris Herbert解释说,但问题仍然存在,请确保在声明@font-face...
的字体时,您已将值设置为font-weight
而不是font-weight: normal;
。 font-weight: 600;
似乎在我的情况下效果最好,而其他所有结果都是相同的人造粗体类型。