如何在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.即使我将其更改font-weight为300(具体而言),它仍将保持为400(切换为200,300和400之间的控制台完全没有效果.我必须专门放置"Roboto Condensed Light",以获得轻盈的字体重量.

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

细节

由于Terry的伟大建议,这里的相关代码基本上是完整的:

    function _miscCSS () {
        var css = function(){/*
@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);

 ...[css declarations follow]...

*/}.toString().slice(14,-3); 
        return css;
    }

    var misc_css = '<style>'+ _miscCSS() +'</style>';
    jQ(misc_css).appendTo('head');

Answer 1

Css文件(例如)(MaterialiseCSS)

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

Answer 2

首先 - 避免使用!important.实际需要时,场景数量非常有限.

Roboto和Roboto Condensed由Google Fonts提供为两个单独的字体系列,因此如果您想使用精简版本,则必须声明,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冷凝为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);