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>