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

Posted 2023-03-06

【中文标题】如何在 Chrome 中使用来自谷歌字体的 Roboto Light/Thin

【英文标题】：How to use Roboto Light/Thin from google fonts in Chrome

【发布时间】：2014-07-17 22:13:58

【问题描述】：

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

【参考方案1】：

Css 文件（例如）（MaterializeCSS）

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

【参考方案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);

【讨论】：

那是一个很棒的小提琴谢谢你..它奇怪地正在为我工作。但在我的用户脚本上，它肯定是 not 工作的。

@robertotomás 你检查过脚本的输出了吗？

我要把这个标记为答案——我的脚本正在运行，我没有看到任何流量被阻止的字体，但你已经说服我字体的工作方式我认为它们在 chrome 中应该是这样的，所以问题是别的。

您好....我将@Terry 的小提琴分叉以包含Roboto+Slab，这样您就可以看到字体系列的衬线版本以及常规和浓缩字体。这里：jsfiddle.net/Dt4pu