Html Chrome 不尊重字体粗细？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15249654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome not respecting font weight?
提问by Sean
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)
我有 Arial 作为我的基本字体，我正在尝试为页面的不同部分使用各种字体粗细（正常、粗体/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!?
这在 Firefox 和 Internet Explorer 中似乎都可以正常工作，但是在 Google chrome 中，粗体/700 和 900 之间似乎完全没有区别！？
(incase the above link is broken/invalid)
（以防上面的链接损坏/无效）
HTML:
HTML：
<p id="one">Testing</p>
<p id="two">Testing</p>
<p id="three">Testing</p>
CSS:
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 questionwhich provides a semi-usefull answer:
我用谷歌搜索了一下，发现了一个类似的问题，它提供了一个半有用的答案：
Solved with:
font-weight: 900; font-family: "Arial Black", Arial, sans-serif;
解决了：
字体粗细：900；font-family: "Arial Black", Arial, sans-serif;
But using the above simple makes everything assume a font-weightof 900 in Chrome (even when specified otherwise)
但是使用上面的简单方法会使font-weightChrome 中的所有内容都假定为 900（即使另有指定）
For an example of this see here(in Chrome obviously)
有关此示例，请参见此处（显然在 Chrome 中）
Is this a bug in Chrome? Or am I doing something wrong here?
这是 Chrome 中的错误吗？或者我在这里做错了什么？
回答by jeradg
Arial (at least the standard version) only has two weights: normaland 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（至少是标准版本）只有两个权重：normal和bold。如果您指定的权重不是这两者之一，浏览器将选择最接近的可用权重。（请参阅：font-weight:900 仅适用于 Firefox）
Arial Black is a separate font from Arial, which is why the semi-useful answer you provided works.
Arial Black 是与 Arial 不同的字体，这就是您提供的半有用答案有效的原因。
If you want to work with Arial, try:
如果您想使用 Arial，请尝试：
#one { font-weight: normal; }
#two { font-weight: bold; }
#three { font-family: "Arial Black", Arial, sans-serif; }
The other alternative is to use a webfont service like Typekit or Webink, and pick a font with more available weights.
另一种选择是使用像 Typekit 或 Webink 这样的 webfont 服务，并选择一种具有更多可用权重的字体。
回答by madhushankarox
I think it is not a bug of Google chrome. It may be the font does not have the weight, 900. Not only in Chrome but also it is not working in Opera and Safari too.
我认为这不是谷歌浏览器的错误。可能是字体没有权重，900。不仅在 Chrome 中，而且在 Opera 和 Safari 中也不起作用。
Arial Black's normal, 700 and 900 everything is same in Safari.
Arial Black 的正常，700 和 900 在 Safari 中一切都一样。
回答by Mariyan
The problem is "Arial Black". For some reason Chrome and IE (by the way) disregard font-weight with that font. Removed it and your CSS is applied as expected.
问题是“Arial Black”。出于某种原因，Chrome 和 IE（顺便说一下）忽略了该字体的字体粗细。删除它并按预期应用您的 CSS。
p { font-family: Arial, sans-serif; font-size: 40px; margin: 0; }
p { font-family: Arial, sans-serif; font-size: 40px; margin: 0; }
P.S. Now that I double check 700 and 900 are not differentiated. 600/900 are though. jeradgis right.
PS 现在我仔细检查了 700 和 900 没有区别。600/900 是虽然。杰拉格是对的。
回答by eugene
If an element has a native font weight other than normal (such as b, strong, th) adding the font weight property set to normal will fix the fuzzy font. This is a temporary fix to what I am convinced that this is a Chrome bug.
如果元素具有非正常的原生字体粗细（例如 b、strong、th），则将字体粗细属性设置为 normal 将修复模糊字体。这是对我确信这是 Chrome 错误的临时修复。
回答by youDontKnow
I found the solution.
我找到了解决方案。
Thanks to LinkedIn.
感谢领英。
-webkit-font-smoothing: antialiased;
