CSS - 实现字体系列的不同字体

Question

我有两个不同字体类型（400和500i）的font-family Roboto

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500i" rel="stylesheet"> 

我想实现500i，但是这个：

p {
font-family: 'Roboto', sans-serif;
}

只允许我使用400字体。

如何在不移除400的情况下实现500i？

Answer 1

在元素上定义bold和italic：

    p {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-style: italic;
    }

---

注意如果您在本地安装了Roboto字体，则需要按以下方式添加script=all rev=2：

p {
    font-family: 'Roboto script=all rev=2', sans-serif;
    font-weight: 500;
    font-style: italic;
}

如果字体是在本地安装的，则浏览器将依赖该字体并忽略Web字体。这个SO Post涵盖了这一点。我不能肯定地说，但由于我们不知道我们的网站访问者是否安装了特定的字体，因此默认添加script=all rev=2似乎是可行的方式。如果你导航到Roboto font offering并检查（使用浏览器dev-tools）'Medium Italic'示例，我们会看到font-family属性默认使用script=all rev=2。