Chrome 不尊重字体粗细? [英] Chrome not respecting font weight?

问题描述

我将 Arial 作为我的基本字体，并且我正在尝试为页面的不同部分使用各种字体粗细(正常、粗体/700 和 900)

I've got Arial as my base font and I'm trying to use a variety of font-weights for different sections of the page (normal, bold/700, and 900)

这似乎在 Firefox 和 Internet Explorer 中都可以正常工作，但在 Google chrome 中，粗体/700 和 900 之间似乎完全没有区别！?

This seems to work fine in both Firefox and Internet Explorer, but in Google chrome there seems to be absolutely no difference between bold/700 and 900!?

见小提琴

(以防上面的链接损坏/无效)

(incase the above link is broken/invalid)

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

我用谷歌搜索了一下，发现了一个类似的问题它提供了一个半有用的答案:

I've googled a bit and found a similar question which provides a semi-usefull answer:

解决方法:

字体粗细:900；font-family: "Arial Black", Arial, sans-serif;

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

但使用上述简单方法会使 Chrome 中的所有内容都假定 font-weight 为 900(即使另有指定)

But using the above simple makes everything assume a font-weight of 900 in Chrome (even when specified otherwise)

有关此示例参见此处(显然在 Chrome 中)

For an example of this see here (in Chrome obviously)

这是 Chrome 中的错误吗?还是我在这里做错了什么?

Is this a bug in Chrome? Or am I doing something wrong here?

推荐答案

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

Arial (at least the standard version) only has two weights: normal and bold. If you specify a weight that is not one of those two, the browser will pick the closest available weight. (See: font-weight:900 only working in Firefox)

Arial Black 是一种独立于 Arial 的字体，这就是您提供的半有用答案有效的原因.

Arial Black is a separate font from Arial, which is why the semi-useful answer you provided works.

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

If you want to work with Arial, try:

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

另一种选择是使用诸如 Typekit 或 Webink 之类的网络字体服务，并选择具有更多可用权重的字体.

The other alternative is to use a webfont service like Typekit or Webink, and pick a font with more available weights.

这篇关于Chrome 不尊重字体粗细?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！