CSS中使用相同的谷歌字体的不同字体粗细

Question

所以我看着这个叫的Roboto

https://fonts.google.com/specimen/Roboto?selection.family=Roboto

它有不同的风格，如光，定期，介质等

谷歌字体

该网站说，导入你可以做

@import url('https://fonts.googleapis.com/css?family=Roboto'); 

，然后在你的样式表，你可以这样做：

font-family: 'Roboto', sans-serif; 

那么，这很好，但我需要他们的混合物。如光，经常，不只是一个。

所以我可以做

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); 

这样就选择了他们。

但它仍然表示，在样式表中，你可以做：

font-family: 'Roboto', sans-serif 

如果你这样做，那么它只是坚持第一个。我需要一种风格是300，一到400，一到500.那么我怎么指定哪一个在CSS？

我试着做

font-family: 'Roboto:300', sans-serif 

和

font-family: 'Roboto 300', sans-serif 

和 font-family: 'Roboto-300', sans-serif

，但没有一次成功。谁能帮忙？

Answer 1

使用font-weight财产

http://www.w3schools.com/cssref/pr_font_weight.asp

例子：

p.normal { 
    font-weight: normal; 
} 

p.thick { 
    font-weight: bold; 
} 

p.thicker { 
    font-weight: 900; 
} 

Answer 2

我的建议是有一个类定义的字体导入谷歌的字体后使用 即在css add：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600'); 

.robotoriser{ 
font-family: 'Roboto', sans-serif; 
font-weight: Normal; /* This is just so when ever you call use this class, it uses the normal font weight by default */ 
} 

.rbt-300{ /* you can also name this rbt-light or whatever you like*/ 
font-weight:300; 
} 

.rbt-400{ 
font-weight:400; 
} 

.rbt-600{ 
font-weight:600; 
} 

...等等。

然后在HTML中使用这样

<p class="robotoriser rbt-300" >This is light text</p> 

<p class="robotoriser rbt-400" >This is medium text</p> 

<p class="robotoriser rbt-600" >This is heavy text</p> 

这里是一个fiddle到工作演示

注意，你也可以用它在任何类，你有 如

.some_element{ 
font-family: 'Roboto', sans-serif; 
font-weight: 300; /* Or any of the font weight values you included via the Google font url */ 
} 

<p class="some_element"> Dragons are goats that can fly :D </p>