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:// 和 hin 而不是 thin)
CSS:
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>关于html - 如何使用 CSS 中的特定字体样式，来自 Google 字体(即细、超轻……)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42532511/