font-weight:300 doesn't work in Chrome

问题:

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.

回答1:

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.