CSS font-weight属性仅显示常规权重

提问者：小点点

CSS font-weight属性仅显示常规权重

我从谷歌字体导入了蒙特塞拉特（400,700和900）和Ubuntu（400）字体，但似乎只有蒙特塞拉特400和Ubuntu 400在工作，我不能使用蒙特塞拉特700或蒙特塞拉特900。如果有人能帮我的话，我会很感激的，因为我已经在这上面困了一段时间了。谢谢！！下面是我的代码:

null

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

null

匿名用户

会不会是，你在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学校

如何导入字体

匿名用户

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

在Chrome中是这样的。

匿名用户

我正在收集这是一个Chrome bug，这很有趣，因为我使用的是一个版本的Chromium，它工作得很好。我建议您在部分中的

CSS font-weight属性仅显示常规权重

共3个答案