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

Question

我在Chrome浏览器中使用Roboto字体时遇到问题。。具体来说，我似乎无法得到精简和薄/轻等字体权重。我下载所有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);

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

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

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

然而，它给我的是普通的机器人。如果我改变“压缩”一个使用字体家族“机器人压缩”它的作品。。。这是有道理的，因为chrome采用font-stretch显然为时已晚。但是，将字体系列更改为“roboto condensed”不会使用较轻的字体重量（即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文件（例如）（ECSS）

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

Answer 2

首先，避免使用！重要的。当这实际上是必要的时候，情况非常有限。

Roboto和Roboto Condensed由Google Fonts作为两个独立的字体系列提供，因此如果您想使用压缩版本，您必须声明字体系列：“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/

因此，例如，不可能获得字体权重为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);