Chrome not respecting font weight?
我将Arial作为基本字体，并且试图在页面的不同部分使用各种字体粗细(常规，粗体/ 700和900)
这似乎在Firefox和Internet Explorer中都可以正常工作，但是在Google chrome中，bold / 700和900之间似乎没有任何区别！
见小提琴
(以防上述链接损坏/无效)
HTML：
1 2 3 4 5 6 | <p id="one">Testing </p> <p id="two">Testing </p> <p id="three">Testing </p> |
CSS：
1 2 3 4 5 | p { font-family: arial; font-size: 40px; margin: 0; } #one { font-weight: normal; } #two { font-weight: 700; } #three { font-weight: 900; } |
我在Google上搜索了一下，发现了一个类似的问题，它提供了半有用的答案：
Solved with:
font-weight: 900; font-family:"Arial Black", Arial, sans-serif;
但是，使用上述简单方法会使一切假设在Chrome中
有关此示例，请参见此处(显然是在Chrome中)
这是Chrome中的错误吗？ 还是我在这里做错了什么？
Arial(至少是标准版本)只有两个权重：
Arial Black是Arial的另一种字体，因此您提供的半有用答案有效。
如果要使用Arial，请尝试：
1 2 3 | #one { font-weight: normal; } #two { font-weight: bold; } #three { font-family:"Arial Black", Arial, sans-serif; } |
另一种选择是使用诸如Typekit或Webink之类的Webfont服务，并选择具有更多可用粗细的字体。
我认为这不是Google Chrome的错误。可能是该字体没有粗细900。不仅在Chrome中，而且在Opera和Safari中也无法使用。
Arial Black的正常值(700和900)在Safari中都是一样的。
问题是" Arial Black"。出于某种原因，Chrome和IE(顺便说一句)忽略了该字体的font-weight。将其删除，您的CSS将按预期应用。
附言现在，我再次检查了700和900的差异。虽然是600/900。 jeradg是对的。
http://jsfiddle.net/ZjHEn/1/
我找到了解决方案。
感谢LinkedIn。
1 | -webkit-font-smoothing: antialiased; |
如果元素具有非常规的本机字体权重(例如b，strong，th)，则将font weight属性设置为normal可以修复模糊字体。这是对我确信这是Chrome错误的临时修复。