How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)

问题

Google served font like Montserrat has a lot of different styles: Thin, Extra-Light, Light, Regular, etc...

I could not find a way to specify a style with CSS. Using Font-weight can access only some of them as can be seen in this CodePen

<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800' 
rel='stylesheet' type='text/css'>

<p class="w100">This is 100 weight</p>

body {
 padding: 0 20px;
 font-family: 'Montserrat';
 font-size:40px;
}

.w100 {
 font-weight: 100;
}

I want to use the Extra-Light style, but regular is the lightest I get.

Is there a straight forward solution to this?

Update: It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.

回答1:

The Google fonts page will actually tell you how to do it and includes a weight select utility. If you want the thinnest style, this is it:

HTML:

<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">

Compare that with yours, it has redundant weights and errors in two places (href='// instead of href="https:// and hin instead of thin)

CSS:

font-family: 'Montserrat', sans-serif;
font-weight: 100;

If you want additional weights, add them like this:

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">

Remember that you only want to specify those that you are actually going to use, as they will need to be downloaded, hence increasing your page's load time.

Here is a working example. If 100 isn't thin enough for you, you're out of luck.

* {
  font-family: 'Montserrat', sans-serif;
}
.w100 {
  font-weight: 100;
}
.w200 {
  font-weight: 200;
}
.w300 {
  font-weight: 300;
}
.w400 {
  font-weight: 400;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet">
  </head>
  <body>
    <p class="w100">This is 100 weight</p>
    <p class="w200">This is 200 weight</p>
    <p class="w300">This is 300 weight</p>
    <p class="w400">This is 400 weight</p>
  </body>
</html>

来源：https://stackoverflow.com/questions/42532511/how-to-use-specific-font-styles-with-css-from-google-fonts-ie-thin-extra-lig

标签

html

css

fonts

google-webfonts