无法使字体粗细工作我如何使它工作？答案

【问题标题】：Can't make font-weight work how do i make it work?无法使字体粗细工作我如何使它工作？
【发布时间】：2019-12-30 13:59:59
【问题描述】：

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

我尝试从谷歌字体加载所有不同的权重，并尝试在我的 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>

【问题讨论】：

标签： css wordpress fonts

【解决方案1】：

您的 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

请注意不要将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>

【讨论】：