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

How to use Roboto Light/Thin from google fonts in Chrome

提问by roberto tomás

I am having trouble using Roboto fonts in the Chrome browser.. specifically I can't seem to get Condensed and Thin/Light, etc. font weights. I download all 3 complete fonts:

我在 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);

then I use them in declarations like:

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

Roboto Condensed

Roboto 浓缩版

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

However, what it gives me is plain Roboto. If I change the "Condensed" one to use font-family "Roboto Condensed" it works ... and that makes sense because apparently chrome is late to adopt font-stretch. However, changing the font-family to "roboto condensed" doesn'tuse the lighter font-weight(which is 300), it stays at 400. Even if I change the font-weightto 300, which it specifically has, it will remain at 400 (switching in the console between 200, 300 and 400 has no effect at all). I have to put "Roboto Condensed Light" specifically, to get the light font-weight.

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

And what about the others? "Roboto Thin" wasn't specifically downloaded or set in a @font-face... I shouldn't have to use names like "roboto thin" when I just want a font-weight, should I?

其他人呢？“Roboto Thin”并未专门下载或设置在@font-face......当我只想要字体粗细时，我不应该使用“roboto Thin”之类的名称，对吗？

Details

细节

Because of Terry's great suggestion, here's the relevant code basically in it's entirety:

由于 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');

采纳答案by Terry

First of all — avoid using !important. There is very limited number of scenarios when this is actually necessary.

首先——避免使用!important. 在实际需要时，场景数量非常有限。

Roboto and Roboto Condensed are provided as two separate font families by Google Fonts, so if you want to use the condensed version, you will have to declare font-family: "Roboto Condensed"as the condensed variant is not included in the Roboto font family.

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

Roboto Condensed has also a more limited amount of font weights available: 300, 400 and 700 compared to Roboto's 100, 300, 400, 700 and 900. Simply speaking, using font weight of 100 and 900 will not work with Roboto Condensed, and will fallback to the nearest possible font-weight.

与 Roboto 的 100、300、400、700 和 900 相比，Roboto Condensed 的可用字体重量也更有限：300、400 和 700。简单地说，使用 100 和 900 的字体重量不适用于 Roboto Condensed，并且会回退到最接近的字体粗细。

How can you confirm that Roboto Condensed is not using the 300 font weight? It seems to be working fine with me (I'm also using it on a few sites)... also working fine in this fiddle: http://jsfiddle.net/8k72a/1/

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

Therefore, it is notpossible to get Roboto Condensed with a font weight of 100, for example.

因此，不可能得到的Roboto冷凝为100字体粗细，例如。

---

---

With your updated question, why not use this script instead? I see that you have broken your CSS styles into several lines — remember to escape the linebreaks in JS with a backslash \:

对于您更新的问题，为什么不改用此脚本？我看到你已经把 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);

回答by Nathalie Guimar?es

Css file (eg) (MaterializeCSS)

CSS 文件（例如）（MaterializeCSS）

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