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

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

解决了：

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

但是使用上述简单方法会使font-weightChrome 中的所有内容都假定为 900（即使另有指定）

有关此示例，请参见此处（显然在 Chrome 中）

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

score 21 · Accepted Answer

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 之类的网络字体服务，并选择具有更多可用权重的字体。

score 3 · Accepted Answer

我认为这不是谷歌浏览器的错误。可能是字体没有重量，900。不仅在 Chrome 中，而且在 Opera 和 Safari 中也不起作用。

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

score 2 · Accepted Answer

问题是“Arial Black”。由于某种原因，Chrome 和 IE（顺便说一下）忽略了该字体的字体粗细。删除它并按预期应用您的 CSS。

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

PS现在我仔细检查700和900没有区别。不过是600/900。杰拉德是对的。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

我找到了解决方案。

感谢领英。

-webkit-font-smoothing: antialiased;

于 2017-03-25T20:56:04.377 回答

5 回答 5