如何在Chrome中使用谷歌字体中的Roboto Light / Thin

Question

我在Chrome浏览器中使用Roboto字体时遇到问题。具体来说，我似乎无法获得Condensed和Thin / Light等字体粗细。我下载了所有3种完整字体：

@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);

然后我在声明中使用它们：

Roboto Condensed

.mas-1st-col {
font-family: Roboto !important;
font-size: 8pt; !important
font-weight: 200 !important;
font-stretch: condensed !important;
}

Roboto Light

span.f, div.f.kv + div.f.slp {
font-family: Roboto !important;
font-size: 8pt !important;
font-weight: 200 !important;
}

然而，它给我的是简单的Roboto。如果我将“Condensed”更改为使用font-family“Roboto Condensed”它可以正常工作......这是有道理的，因为显然铬采用font-stretch已经很晚了。但是，将font-family更改为“roboto condensed”不会使用较轻的font-weight（即300），它会保持为400.即使我更改了{{1}它具体到300，它将保持在400（在200,300和400之间切换到控制台根本没有效果）。我必须专门放置“Roboto Condensed Light”，以获得轻盈的字体重量。

其他人怎么样？ “Roboto Thin”没有专门下载或设置在font-weight ...我不应该使用像“roboto thin”这样的名字，当我只想要一个字体重量时，我应该吗？

详细

由于特里的好建议，这里的相关代码完全基于以下内容：

@font-face

Answer 1

首先 - 避免使用!important。实际需要的情况非常有限。

Roboto和Roboto Condensed由Google字体作为两个单独的字体系列提供，因此如果您想使用精简版本，则必须声明font-family: "Roboto Condensed"，因为精简版本不包含在Roboto字体系列中

Roboto Condensed还提供了更有限的字体重量：300,400和700与Roboto的100,300,400,700和900相比。简单地说，使用100和900的字体重量不会使用Roboto Condensed，并将回退到最接近的字体权重。

如何确认Roboto Condensed没有使用300字体重量？它似乎对我很好（我也在一些网站上使用它）...也在这个小提琴中工作得很好：http://jsfiddle.net/8k72a/1/

因此，例如，不可以让Roboto Condensed字体权重为100。

---

根据您更新的问题，为什么不使用此脚本呢？我看到你已经将CSS样式分成了几行 - 记得用反斜杠\来逃避JS中的换行符：

var css = '@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);\
           @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);\
           @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

Answer 2

Css文件（例如）（MaterialiseCSS）

p {
  font-family:Roboto;
  font-weight: 200;
}