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

Posted 2023-03-06

【中文标题】Google Chrome 中的粗体字体模糊（@Font-Face）

【英文标题】：Bold Fonts in Google Chrome are Blurry (@Font-Face)

【发布时间】：2014-02-15 10:27:10

【问题描述】：

最近将我的 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 之前，这些网站可以正确显示字体，我已经在以下浏览器中测试了字体，它们仍然可以正确显示：

火狐26.0 IE11 Opera 12.11 Safari 5.1.7

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

编辑

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

【参考方案1】：

在示例中，您在@font-face 规则中只为 Gotham 和 Sansation 声明了普通（常规）字体，但尝试使用粗体。这使得浏览器应用算法（合成）粗体，并产生不同的结果。

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

【讨论】：

这就是解决方案。奇怪的是它只是在我更新 chrome 后才开始发生。这些网站已经运行了一年多，没有任何问题。很遗憾，粗体字体类型......太粗了。谢谢。

我向谷歌发送了一份关于这个问题的错误报告，他们似乎已经恢复了字体的“模糊”效果:)

code.google.com/p/chromium/issues/detail?id=332958 cmets 的问题已关闭并显示为“已修复”，但事实并非如此。我正在运行最新版本 34，粗体字体仍然模糊，即使在 Chrome Web Store 网站上也是如此......

【参考方案2】：

我有同样的问题。大约 5 年前就有人问过这个问题，但问题仍然存在。我正在使用 Chrome 69。

在我的项目中使用谷歌字体时，我得到了模糊的文字。

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

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:light,regular,medium,thin,italic,mediumitalic,bold' rel='stylesheet' type='text/css'>

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