Question

我无法获得用于加载不同权重的字体。

我尝试从Google字体加载所有不同的粗细，并且都尝试在CSS和

在我的CSS中：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

* {
    font-family: 'Open Sans', sans-serif;
}
.titles{
    align-content:left;
    font-weight:800;
}

在我的html中：

<div class="titles">
   <h2> What we do.</h2>
</div>

Answer 1

使用html的head标签中的链接:)

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">

Answer 2

请注意，不要将import链接分成多行，也不要检查链接中的空格。它应该全部放在一行上。没有空格或换行符。

如果您有不同的样式表，而只需要在特定样式表中导入，则应使用

@import。或者，如果您无权编辑<head>元素。

否则，您应该使用html <link>元素将字体直接包含在head元素中。

在下面检查

 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

 * {
   font-family: 'Open Sans', sans-serif;
 }

 .titles {
   align-content: left;
   font-weight: 800;
 }

<div class="titles">
  <h2> What we do.</h2>
</div>

Answer 3

您的800值被h2元素的默认浏览器设置700覆盖，因为您仅将其应用于.titles。您需要将font-weight: 800专门应用于h2元素。

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

* {
    font-family: 'Open Sans', sans-serif;
}

.titles h2 {
    align-content: left;
    font-weight: 800;
}

<div class="titles">
    <h2>What we do.</h2>
</div>

无法使字体粗细起作用，如何使它起作用？

3 个答案: