CSS：2 种粗细 - 1 种字体答案

【问题标题】：CSS: 2 thicknesses - 1 FontCSS：2 种粗细 - 1 种字体
【发布时间】：2016-11-10 10:06:37
【问题描述】：

我在我的网站上使用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 种导入字体中的哪一种。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

@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; }

【讨论】：

【解决方案3】：

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

【讨论】：