本文介绍了Chrome 不尊重字体粗细?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我将 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(至少是标准版)只有两个粗细:normalbold.如果您指定的权重不是这两者之一,则浏览器将选择最接近的可用权重.(请参阅: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 不尊重字体粗细?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-09 23:06