谷歌浏览器中的大胆字体模糊（@ Font-Face）

Question

最近将我的Google Chrome浏览器升级到Version 32.0.1700.76 m后，我发现使用@font-face粗体字体会对我的网站产生模糊/阴影效果。

Here is an example site with bold text

Here is an example site with bold headers

在更新我的Chrome之前，这些网站正确显示字体，我在以下浏览器中测试了字体，但它们仍然可以正确显示：

• Firefox 26.0
• IE11
• Opera 12.11
• Safari 5.1.7

除了降级谷歌浏览器之外，还有什么方法可以阻止这种模糊效果吗？

修改

我向Google发送了一个关于此问题的错误报告，似乎他们已经恢复了对字体的“模糊”效果。要避免这个问题，请使用 Jukka K. Korpela的解决方案。

Answer 1

在示例中，您已在@font-face规则中仅为Gotham和Sansation声明了正常（常规）字体，但尝试使用粗体。这使得浏览器应用算法（合成）粗体，结果各不相同。

解决方案是在@font-face具有font-weight: bold的规则中获取粗体字并声明它们。

Answer 2

我遇到了同样的问题。这个问题已经问了将近5年了，但问题仍然存在。我正在使用Chrome 69。

在我的项目中，我使用的是Google字体，但变得模糊了。

我通过以下代码使用Google字体：

  

https://fonts.googleapis.com/css?family=Roboto:400,600,800'   rel ='stylesheet'type ='text / css'>

字体大小属性中最重要的部分我总是使用

  

字体粗细：粗体

解决方案：现在，如果您将400,600,800用作常规，半粗体和粗体，那么当然可以用

替换它

  

https://fonts.googleapis.com/css?family=Roboto：轻，常规，中，薄，斜体，斜体，粗体'   rel ='stylesheet'type ='text / css'>

注意：我分享一个解决我的问题的解决方案。可能不适用于您的情况。