Chrome不尊重字体重量？

Question

我有Arial作为我的基本字体,我试图在页面的不同部分使用各种字体权重(正常,粗体/ 700和900)

这似乎在Firefox和Internet Explorer中都可以正常工作,但在Google Chrome中,粗体/ 700和900之间几乎没有区别!？

看小提琴

(如果以上链接被破坏/无效)

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; }

我用Google搜索了一下,发现了一个类似的问题,提供了一个半有用的答案:

解决:

font-weight:900; font-family:"Arial Black",Arial,sans-serif;

但是使用上面这个简单的功能可以让font-weightChrome中的所有内容都达到900(即使另有说明)

有关此示例,请参阅此处(显然在Chrome中)

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

Answer 1

Arial(至少是标准版)只有两个权重:normal和bold.如果您指定的权重不是这两者中的一个,浏览器将选择最接近的可用权重.(参见:font-weight:900仅适用于Firefox)

Arial Black是一种与Arial不同的字体,这就是为什么您提供的半有用答案有效.

如果您想使用Arial,请尝试:

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

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