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

Question

我有两种不同字体类型（400和500i）的字体系列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;
}

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