Google Chrome中的加粗字体模糊不清（@Font-Face）

Question

最近我将Google Chrome浏览器升级到版本32.0.1700.76 m，发现使用@font-face的网站上的粗体字有模糊/投影效果。以下是两个展示了粗体字的例子：一个网站和一个带粗标题的网站。在更新Chrome之前，这些网站都能正确显示字体。我测试了以下浏览器，它们仍然能够正确显示字体：Firefox 26.0、IE11、Opera 12.11以及Safari 5.1.7。除了降级Google Chrome，是否还有其他方法可以停止这种模糊效果呢？更新：我向Google发送了有关此问题的错误报告，他们似乎已经撤销了字体的“模糊”效果。要避免此问题，请尝试Jukka K. Korpela的解决方案。

- AfromanJ

Answer 1

在这些示例中，您只声明了 Gotham 和 Sansation 的普通（常规）字体，但尝试使用粗体字。这会使浏览器应用算法（合成）加粗，结果不同。

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

- Jukka K. Korpela

---

这是解决方案。奇怪的是，这种情况只发生在我更新 Chrome 后。这些网站已经上线一年多了，没有任何问题。可惜粗体字太粗了。谢谢。 - AfromanJ

我向谷歌发送了一个关于这个问题的错误报告，看起来他们已经取消了字体上的“模糊”效果 :) - AfromanJ

https://code.google.com/p/chromium/issues/detail?id=332958 该问题已关闭评论并显示为“已解决”，但实际上并没有。我正在运行最新版本34，而加粗字体仍然模糊，甚至在Chrome网上商店网站上也是如此... - Community

Answer 2

我曾经遇到同样的问题。这个问题在5年前就被提出了，但这个问题仍然存在。我使用的是Chrome 69浏览器。

当我在我的项目中使用谷歌字体时，文本变得模糊不清。

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

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

而且，在字体属性中最重要的部分，我总是使用

font-weight: bold

解决方法：现在如果你将400、600、800作为常规、中等和粗体使用，那么请使用下面的代码代替：

https://fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold' rel='stylesheet' type='text/css'>

注意：我分享的解决方案解决了我的问题，但可能不适用于你的情况。

- Shuvankar Paul