font-weight over a font-face not working?

问题

I am trying to make a text thinner and i have seen it working properly on a website. http://www.freshthemes.net/demo/backbone/about-us/ (Under company overview)

This is the style I am using:

.intro p{
    text-align: justify;
    margin-bottom: 8px;
    line-height: 22px;
    margin-bottom: 8px;
    font: 17px/21px "Open Sans", Arial, "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    color:#656565;
}

And the font is loaded with:

<link rel='stylesheet' id='google_webfont_OpenSans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans' type='text/css' media='all' />

The thing, font-weight property seems not to have any effect. It doesn't mind if I set it to 300 or not. (and it shouldn't, on the previous site its working)

This is my body:

<div class="intro">
    <p>
        This is the text that should be thinner
    </p>
</div>

What am I missing?

回答1:

You are not loading every font-weights. You should try something like that :

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

You can customize it to your need on this google page by checkig all fonts that you need (but watch out for site speed if you load too much fonts !): http://www.google.com/webfonts#UsePlace:use/Collection:Open+Sans

回答2:

In order to use different weights of a web-font, you must include it in your <link>, by adding your weights to the end of the font's name like so:

<link rel='stylesheet' id='google_webfont_OpenSans-css' ref='http://fonts.googleapis.com/css?family=Open+Sans:400,300' type='text/css' media='all' />

while each such addition will make your page load heavier, be weary of loading too many fonts with too many font-weights

来源：https://stackoverflow.com/questions/13360061/font-weight-over-a-font-face-not-working

标签

css

css3

font-face

webfonts