在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;

如何单独使用权重？

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中添加：

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

这是一个工作演示的小提琴

请注意，您也可以在任何课程中使用它 例如

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