如何在 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 浓缩版

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

然而，它给我的是普通的 Roboto。如果我将“Condensed”更改为使用字体系列“Roboto Condensed”，它可以工作......这是有道理的，因为显然 chrome 采用font-stretch 很晚。但是，将字体系列更改为“roboto condensed”不会使用较轻的 font-weight（即 300），它保持在 400。即使我将 font-weight 更改为 300，它特别具有，它将保持在 400（在控制台中在 200、300 和 400 之间切换根本没有效果）。我必须专门输入“Roboto Condensed Light”，以获得较轻的字体粗细。

那么其他人呢？ “Roboto Thin”不是专门下载或设置在 @font-face 中的......当我只想要一个字体粗细时，我不应该使用像“roboto Thin”这样的名称，不是吗？

详情

由于特里的好建议，下面是基本完整的相关代码：

    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 文件（例如）（MaterializeCSS）

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/

因此，例如，不可能使用字体粗细为 100 的 Roboto Condensed。

---

有了更新的问题，为什么不改用这个脚本呢？我看到你已经把你的 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);