Chrome不尊重字体粗细？

Posted 2023-03-15

技术标签:

【中文标题】Chrome不尊重字体粗细？【英文标题】：Chrome not respecting font weight? 【发布时间】：2013-02-21 09:07:23 【问题描述】：

我将 Arial 作为我的基本字体，我正在尝试为页面的不同部分使用各种字体粗细（普通、粗体/700 和 900）

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

See fiddle

（以防上述链接损坏/无效）

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;

我用谷歌搜索了一下，找到了一个similar question，它提供了一个半有用的答案：

解决方法：

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

但使用上述简单方法会使所有内容在 Chrome 中假设 font-weight 为 900（即使另有指定）

以see here 为例（显然在 Chrome 中）

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

【问题讨论】：

在 Linux 上的 Firefox 中，font-weight: 700 和 900 之间也没有区别。 【参考方案1】：

Arial（至少是标准版）只有两个权重：normal 和 bold。如果您指定的权重不是这两者之一，浏览器将选择最接近的可用权重。（见：font-weight:900 only working in Firefox）

Arial Black 是与 Arial 不同的字体，这就是您提供的半有用答案有效的原因。

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

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

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

【讨论】：

感谢您的澄清，我不知道默认情况下 Arial 没有指定 900 粗细...仍然被 Firefox 以 900 设置为字体粗细显示它感到困惑，也许它只是处理方式与其他浏览器不同是的，Firefox 和 Chrome 在字体渲染上存在一些差异。我在您的 jsfiddle 中没有看到 Firefox 和 Chrome 之间的区别，但您可能取决于您的浏览器版本。（不客气！） Arial Black 不是更多（也不少于）“一种单独的字体”，例如宋体粗体。它是字体系列 Arial 的一种字体，但并非所有浏览器都能做到这一点。【参考方案2】：

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

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

附：现在我仔细检查了 700 和 900 没有区别。不过是600/900。 jeradg 是对的。

http://jsfiddle.net/ZjHEn/1/

【讨论】：

【参考方案3】：

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

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

【讨论】：

【参考方案4】：

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

【讨论】：