CSS font-weight 属性只显示常规粗细答案

【问题标题】：CSS font-weight property only displaying regular weightCSS font-weight 属性只显示常规粗细
【发布时间】：2020-10-11 08:03:37
【问题描述】：

我从谷歌字体导入了 Montserrat（400,700 和 900）和 Ubuntu(400) 字体，但似乎只有 Montserrat 400 和 Ubuntu 400 在工作，我不能使用 Montserrat 700 和 Montserrat 900。如果任何人都可以帮助我，因为我已经坚持了一段时间。谢谢！！这是我的代码：

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">

body{
font-family: 'Montserrat', sans-serif;
}

h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}

h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}

<h1>Title</h1>
<h3>Title</h3>

【问题讨论】：

对我来说似乎工作正常：jsfiddle.net/f3qx8nkb您使用的是什么浏览器？
此处相同：jsfiddle.net/wfp168se/4（删除所有非权重属性以查看纯效果）
@ttoshiro 我正在使用 Chrome，但蒙特塞拉特 700 和 900 无法工作：/。我也在使用 Bootstrap，但我在声明 google 字体之前制作了 bootstrap 的 html 声明，以防它没有覆盖任何内容但仍然无法正常工作:(

标签： html css fonts

【解决方案1】：

你可以在你的css文件中链接字体吗？你应该把它移到你的 html 中。

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<p class="w-900">Hello 900</p>
<p class="w-700">Hello 700</p>

body{
font-family: 'Montserrat', sans-serif;
}

.w-900{
font-weight: 900;
}

.w-700{
font-weight: 700;
}

JSFiddle

或者，您可以使用@font-face

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

W3 Schools

How to import fonts

【讨论】：

【解决方案2】：

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">

这部分代码应该在您的 HTML 文件中。这是我所做的以及它的样子。

HTML：

<html>
<link href="https://fonts.googleapis.com/css2? 
family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="style.css">
<h1>This is 900.</h1>
<h3>This is 700.</h3>
</head>
</html>

CSS：

h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}

h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}

In Chrome it looks like this.

【讨论】：

该部分已在我的 HTML 文件中，我的代码与您相同，但我的 Chrome 对 Montserrat 700 和 900 的显示方式不同
你可能在某个地方犯了错误，我建议完全重写一些部分，如果由于某种原因它不起作用，也可以尝试 font-face。此外，在其他浏览器中进行测试，如果您可以访问它，甚至可以在另一台计算机上进行测试。

【解决方案3】：

我收集到这是一个 Chrome 错误，这很有趣，因为我使用的是 Chromium 版本并且它工作正常。我建议在 <head> 部分的 <style> 标记下使用内部 CSS（而不是外部样式表）（您还应该将 <link> 引用到字体），并将分配给 * 的 CSS 添加为如下图，给它：

* {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 3.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.5;
}

h3 {
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

<head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
</head>

<body>
  <h1>Title</h1>
  <h3>Title</h3>
</body>

另外，还有@import 方法，您应该会发现它在the Embed section of the Google Fonts link 中作为右侧选项显示为灰色。但是，这应该是您的次要选择，因为as @igriorik notes here，这些规则会延迟加载包含的资源，直到获取文件，这可能会导致某些平台上的字体损坏。

不过，为此，您需要在<style> 标记下添加@import 规则，并在所需元素中引用它。在您的情况下（使用蒙特塞拉特字体）：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
}

h1 {
  font-size: 3.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.5;
}

h3 {
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

<h1>Title</h1>
<h3>Title</h3>

如果这不起作用，请告诉我！

【讨论】：