Google 提供的字体如 Montserrat 有很多不同的样式： 薄型、超轻型、轻型、常规型等...
我找不到用 CSS 指定样式的方法。 使用 Font-weight 只能访问其中的一些，如在此 CodePen
中所示<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800'
rel='stylesheet' type='text/css'>
<p class="w100">This is 100 weight</p>body {
padding: 0 20px;
font-family: 'Montserrat';
font-size:40px;
}
.w100 {
font-weight: 100;
}
我想使用 Extra-Light 款式，但常规款式是我得到的最轻的。
有没有直接的解决方案？
更新： 这是一个浏览器问题。我的 Chrome 有字体问题。我发布的代码工作得很好。
Google 字体页面实际上会告诉您如何操作，并包含一个粗细选择实用程序。如果你想要最薄的样式，这就是Montserrat（不同的字体有不同的粗细可供选择）：
HTML：
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
与你的相比，它有多余的权重和两个错误（
href='//href="https://hinthinCSS：
font-family: 'Montserrat', sans-serif;
font-weight: 100;
如果您想要额外的重量，请按如下方式添加：
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">
请记住，您只想指定那些您实际要使用的内容，因为它们需要下载，从而增加页面的加载时间。
这是 Montserrat 的一个工作示例。如果
100* {
font-family: 'Montserrat', sans-serif;
}
.w100 {
font-weight: 100;
}
.w200 {
font-weight: 200;
}
.w300 {
font-weight: 300;
}
.w400 {
font-weight: 400;
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet">
</head>
<body>
<p class="w100">This is 100 weight</p>
<p class="w200">This is 200 weight</p>
<p class="w300">This is 300 weight</p>
<p class="w400">This is 400 weight</p>
</body>
</html>从index.html中的google fonts导入字体链接后。创建一个 global.css 文件，其中包含具有不同字体粗细的 Montserrat 字体系列的 css 代码。
我在我的 React 项目中使用这种字体。
从谷歌字体导入或链接字体。我的看起来像这样
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>
通过 css 文件来使用字体系列中的每个变体对您来说非常有用。
.thin {
/* Montserrat Thin = 100 */
font-weight: 100;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extralight {
/* Montserrat Extra Light = 200 */
font-weight: 200;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.light {
/* Montserrat Light = 300 */
font-weight: 300;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.regular {
/* Montserrat Regular = 400 */
font-weight: 400;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.medium {
/* Montserrat Medium = 500 */
font-weight: 500;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.semibold {
/* Montserrat Semi-bold = 600 */
font-weight: 600;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.bold {
/* Montserrat Bold = 700 */
font-weight: 700;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.extrabold {
/* Montserrat Extra Bold = 800 */
font-weight: 800;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
.black {
/* Montserrat Black = 900 */
font-weight: 900;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
当前答案已过时，现在的语法是：
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
或对于倍数：
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">