1

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

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

<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) 但它们都没有真正改变。

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

4

5 回答 5

2

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

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

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

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

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

于 2017-03-24T09:34:31.760 回答
2

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

<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;
}
于 2017-03-24T09:40:52.267 回答
1

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

.text { 
    font-weight: 700;
}
于 2017-03-24T09:36:24.953 回答
1

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

font-weight: 100|300|700 /其中任何一个/ 。

谷歌字体基本上使用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.
于 2017-03-24T09:39:17.183 回答
1

在您的 css 文件中，添加：

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

在顶部。

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

.class{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
于 2017-03-24T09:42:06.563 回答