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

@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

请注意，您也可以在任何课程中使用它 e.g

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

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

2 个答案: