在css中使用相同google字体的不同字体重量

所以我在看这个叫做Roboto的谷歌字体

它有不同的风格，如轻，常规，中等，等等

网站上说你可以导入吗

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

然后在样式表中，您可以执行以下操作：

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

font-family: 'Roboto', sans-serif

好吧，那很好，但我需要一种混合的。如轻，有规律，不只是一个

所以我能做到

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

这就选择了它们

但它仍然在样式表中指出，您可以：

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

font-family: 'Roboto', sans-serif

如果你这样做，那么它只会坚持第一个。我需要一个样式是300，一个是400，一个是500。那么如何在css中指定哪一个呢

我试过了

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

及

及

字体系列：“Roboto-300”，无衬线

但没有一个成功。有人能帮忙吗？
使用
字体重量属性


例如：

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

我建议使用一个类来定义要使用的字体
i、 e导入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>

这是浅色文本
这是中文本
这是一个沉重的文本

下面是一个工作演示的示例

注意，您也可以在任何类中使用它
e、 g

。一些元素{
字体系列：“Roboto”，无衬线；
字体重量：300；/*或通过Google字体url包含的任何字体重量值*/
}
龙是会飞的山羊：D

那么你是说我只需要“常规”字体吗？不需要。你必须导入所有要使用的字体类型（普通、斜体、粗体、斜体…），然后使用
字体权重属性指定要在css中使用的字体。请注意，使用
font-weight
可以设置文本的厚度，而使用
font-style
可以设置为斜体或法线。出于某种原因，这里似乎只有两个州。正常和大胆。900与粗体相同。但300和400之间似乎没有区别。有什么想法吗？检查一下你要做的sure@user6950100，字体大小：300和字体大小：300与上面我的答案中所示的不一样。检查这些-检查您是否在Google字体URL中添加了所有字体权重，并确保其有效-检查您的代码，以了解其他样式规则是否未覆盖要设置样式的类或元素的字体权重如果您有我们可以检查的链接，那将非常好