Google Chrome中的粗体字体模糊（@ Font-Face） [英] Bold Fonts in Google Chrome are Blurry (@Font-Face)

问题描述

最近将Google Chrome浏览器升级到版本32.0.1700.76 m 我注意到，大胆的字体在我的网站上使用 @ font-face 。

。

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

• Firefox 26.0


• IE11


• Opera 12.11


• Safari 5.1.7

除了降级Google Chrome之外，是否有任何方法停止此模糊效果？

EDIT

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

解决方案

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

解决方案是获取粗体字体并在 face 有 font-weight：bold 的规则。

Recently after upgrading my Google Chrome browser to Version 32.0.1700.76 m I noticed that bold fonts have a blur/drop shadow effect on my sites using @font-face.

Here is an example site with bold text.

Here is an example site with bold headers.

Before updating my Chrome these sites were displaying font correctly, I have tested fonts in the following browsers and they are still displaying correctly:

• Firefox 26.0
• IE11
• Opera 12.11
• Safari 5.1.7

Is there any way to stop this blur effect other than downgrading Google Chrome?

EDIT

I sent a error report to Google about this issue and it seems like they have reverted the "blurry" effect on fonts. To avoid this issue go with Jukka K. Korpela's solution.

解决方案

In the examples, you have declared only normal (regular) typefaces for Gotham and Sansation in @font-face rules, yet try to use bold face. This makes browsers apply algorithmic (synthetic) bolding, with varying results.

The solution is to get bold typefaces and declare them, in @font-face rules that have font-weight: bold.

这篇关于Google Chrome中的粗体字体模糊（@ Font-Face）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！