无法加载特定的 Roboto 字体答案

【问题标题】：Can't load specific Roboto font无法加载特定的 Roboto 字体
【发布时间】：2017-03-24 09:31:20
【问题描述】：

我的问题很简单，症状很奇怪。

在我的 HTML 的头部，我包含了直接从 Google 字体加载字体的代码。

<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">

这是我的 CSS：

.text {
            font-family: 'Roboto', sans-serif;
            color: white;
            font-size: large;
        }

无论我选择什么自定义，字体似乎都是正常的字体。我尝试使用 Roboto Thin (Roboto:100) 和 Roboto Thin Italic (Roboto:100i)，但它们都没有真正改变。

我的代码中有什么遗漏吗？

【问题讨论】：

您是否尝试过更改您的font-weight 属性？（例如到 300 或 400 或 700）
@exoslav 不，我没有。 Google 上的文档没有提到任何关于字体粗细的内容

标签： css fonts roboto

【解决方案1】：

它依赖于你从谷歌获得的女巫字体，在这种情况下：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">

你可以这样处理 CSS 中的每个字体粗细：

// 300 weight
.text {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

// 400 weight
.text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

// 700 weight
.text {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

【讨论】：

您的示例中有font-size。你的意思是使用font-weight？
是的，当然，很抱歉造成混淆。

【解决方案2】：

您正在加载具有 700 字体粗细的 Roboto 字体并尝试以 100 字体粗细显示它。使用以下 URL 嵌入它：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet">

使用此链接，它会为您工作。

更新：这段代码sn-p会为你详细解释。

.text  {
    font-family: 'Roboto', sans-serif;
    color: #000;
}
.text-100 {
    font-weight: 100;
}
.text-100i {
    font-weight: 100;
    font-style: italic;
}
.text-400 {
    font-weight: 400;
}
.text-700 {
    font-weight: 700;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet"> 

<div class="text text-100">
Hello (Font weight: 100)
</div>
    
<div class="text text-100i">
Hello (Font weight: 100i)
</div>
    
<div class="text text-400">
Hello (Font weight: 400) 
</div>
    
<div class="text text-700">
Hello (Font weight: 700)
</div>

【讨论】：

我已经尝试放置 100 和 100i，但什么也没发生。我切换到 700 看看是否有任何变化。但什么都没有。
你能解释一下为什么要加载这么多不同的自定义吗？以及浏览器如何知道要显示哪一个？
我在回答中添加了代码 sn-p 以便更好地向您解释。
您可以根据需要只加载一种字体粗细。我添加了其中的多个向您解释

【解决方案3】：

你只需要在你的 CSS 中设置你的权重字体

.text { 
    font-weight: 700;
}

【讨论】：

这是必须的吗？我想如果我只加载那个字体，那将是我唯一的“Roboto”字体？
浏览器仍然“创建”字体的非粗体版本，所以如果您只想加载粗体字体，那么是的，这将是必要的。我建议你要么加载较浅的字体，要么包括字体粗细

【解决方案4】：

首先加载所有字体- 只需使用

font-weight: 100|300|700 /任意一个/ .

Google 字体基本上使用 font-weight 属性。谷歌字体是根据字体粗细规范呈现的。例如-

Case 1 - font-weight:100 then thin font will load.

Case 2 - font-weight:300 then light font will load.

Case 3 - font-weight:700 then bold font will load.

【讨论】：

Google 的文档没有提到这一点。你能告诉我在哪里读到这个吗？

【解决方案5】：

在您的 css 文件中，添加：

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

在顶部。

并且，在所需的类中使用它，例如：

.class{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

【讨论】：