Chrome不尊重字体重量？

Question

我有Arial作为我的基本字体，我正在尝试为页面的不同部分使用各种字体权重（普通，粗体/ 700和900）

这似乎在Firefox和Internet Explorer中都运行良好，但在Google Chrome中，粗体/ 700和900之间似乎没有任何区别！？

See fiddle

（如果上述链接被破坏/无效）

HTML：

<p id="one">Testing</p>
<p id="two">Testing</p>
<p id="three">Testing</p>

CSS：

p { font-family: arial; font-size: 40px; margin: 0; }

#one { font-weight: normal; }
#two { font-weight: 700; }
#three { font-weight: 900; }

我用谷歌搜索了一下similar question，它提供了一个半有用的答案：

  

解决：

     

font-weight：900; font-family：“Arial Black”，Arial，sans-serif;

但是使用上述简单功能可以使Chrome中的font-weight为{{1}}（即使另有说明）

有关此see here的示例（显然在Chrome中）

这是Chrome中的错误吗？或者我在这里做错了什么？

Answer 1

Arial（至少标准版）只有两个权重：normal和bold。如果您指定的权重不是这两者中的一个，浏览器将选择最接近的可用权重。 （见：font-weight:900 only working in Firefox）

Arial Black是一种与Arial不同的字体，这就是您提供的半有用答案的原因。

如果您想使用Arial，请尝试：

#one { font-weight: normal; }
#two { font-weight: bold; }
#three { font-family: "Arial Black", Arial, sans-serif; }

另一种方法是使用像Typekit或Webink这样的webfont服务，并选择具有更多可用权重的字体。

Answer 2

我认为这不是Google Chrome的错误。它可能是字体没有重量，900。不仅在Chrome中，它也不能在Opera和Safari中使用。

Arial Black的正常，700和900在Safari中一切都是一样的。

Answer 3

问题是“Arial Black”。出于某种原因，Chrome和IE（顺便说一句）忽略了该字体的font-weight。删除它，你的CSS按预期应用。

p { font-family: Arial, sans-serif; font-size: 40px; margin: 0; }

P.S。现在，我仔细检查700和900没有区别。但是600/900。 jeradg 是对的。

http://jsfiddle.net/ZjHEn/1/

Answer 4

如果元素具有非正常的本机字体权重（例如b，strong，th），则将字体权重属性设置为normal将修复模糊字体。这是对我确信这是Chrome错误的临时修复。

Answer 5

我找到了解决方案。

感谢LinkedIn。

-webkit-font-smoothing: antialiased;