无法加载特定的 Roboto 字体

Question

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

在我的 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)，但 none 实际上发生了变化。

我的代码中是否遗漏了什么？

Answer 1

您正在加载 700 字重的 Roboto 字体，并试图以 100 字重显示它。使用以下 URL:

嵌入它

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

使用这个 link，它会很好地工作。

更新：此代码片段将向您详细解释。

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

Answer 2

您只需要在 CSS

中设置体重的字体

.text { 
    font-weight: 700;
}

Answer 3

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

font-weight: 100|300|700 /Any one of them/ .

Google 字体基本上与 font-weight 属性一起使用。 google 字体根据字体粗细规范呈现。例如-

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.

Answer 4

它依赖于您从 google 获得的字体，在这种情况下：

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

Answer 5

在您的 css 文件中，添加：

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

在顶部。

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

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

无法加载特定的 Roboto 字体

Can't load specific Roboto font

css

fonts

roboto