font-weight：300在Chrome中无法使用 [英] font-weight:300 doesn't work in Chrome

问题描述

我在Chrome中遇到与font-weight有关的问题。任何低于默认权重400的字体权重将以默认权重渲染，覆盖font-weight：300 CSS属性。高于默认权重的字体权重将按照预期在Chrome中呈现，所有字体权重在Firefox中正确显示。为什么会发生这种情况？

例如：

 < div class =light> Light< / div> 
  

使用CSS

  .light {font-weight：300;} 
  

重量：400。

jsfiddle，比较Firefox中的视图和Chrome

编辑：在Fedora 20中运行的Chrome和Firefox文字的屏幕截图：

Chrome（呈现不正确）：i.imgur.com/MCHHTlF.png

Firefox（正确呈现）：i.imgur.com/tTH9rPd.png

解决方案

很抱歉，我只能张贴2个连结。将字体系列更改为'Open Sans Light'，sans-serif; 。我有同样的问题，这对我有用。它也工作在你提供的小提琴。

I'm having an issue with font-weight in Chrome. Any font weights lower than the default weight of 400 will render at the default weight, overriding the font-weight:300 CSS attribute. Font weights higher than the default weight will render as expected in Chrome, and all font weights render properly in Firefox. Why is this happening?

For example:

<div class="light">Light</div>

with CSS

.light {font-weight:300;}

will render as if font-weight:400.

jsfiddle, compare view in Firefox and Chrome

EDIT: Screenshots of the text in both Chrome and Firefox, running in Fedora 20:

Chrome (incorrect rendering): i.imgur.com/MCHHTlF.png

Firefox (correct rendering): i.imgur.com/tTH9rPd.png

Sorry, I can only post 2 links maximum, apparently.

解决方案

Try changing the font family to 'Open Sans Light', sans-serif;. I had the same problem and this worked for me. It also worked in your provided fiddle.

这篇关于font-weight：300在Chrome中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！