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

Question

所以我正在研究这种名为 Roboto 的 Google 字体

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

我建议有一个定义要使用的字体的类 即在导入 google 字体后，在你的 css 中添加：

@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>