CSS: 2 种粗细 - 1 种字体

Question

我在我的网站上使用 Google Roboto Font，但我有一点实施问题。 Google 允许我们在导入前调整字体粗细：

粗细700

字体的导入代码

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

粗细300

字体的导入代码

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

我的问题是，CSS 中的用法不依赖于两个导入。这意味着它总是

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

我无法选择要使用的 2 种导入字体中的哪一种。

Answer 1

在 CSS 端，您必须分别应用这些规则：

font: normal 300 16px 'Roboto', sans-serif; //thin font
font: normal 700 16px 'Roboto', sans-serif; //bolder font

Answer 2

根据需要在 CSS 规则中使用 font-weight: 300; 和 font-weight: 700;

Answer 3

您可以结合导入来获取两个权重：

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

然后在适当的地方使用 font-weight: 300; 或 font-weight: 700;。

阿拉

.someclass { font-family: 'Roboto', sans-serif; font-weight: 300; }
.someclass strong { font-weight: 700; }