Html 如何在 CSS 中使用特定字体样式，来自 Google 字体（即细、超轻......）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42532511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)
提问by is_this_taken
Google served font like Montserrathas a lot of different styles: Thin, Extra-Light, Light, Regular, etc...
像蒙特塞拉特这样的谷歌提供的字体有很多不同的风格：薄、超轻、轻、常规等......
I could not find a way to specify a style with CSS. Using Font-weight can access only some of them as can be seen in this CodePen
我找不到用 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>
<p class="w100">This is 100 weight</p>
body {
padding: 0 20px;
font-family: 'Montserrat';
font-size:40px;
}
.w100 {
font-weight: 100;
}
I want to use the Extra-Light style, but regular is the lightest I get.
我想使用 Extra-Light 样式，但常规是我得到的最轻的样式。
Is there a straight forward solution to this?
有没有直接的解决方案？
Update: It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.
更新：这是浏览器问题。我的 Chrome 有字体问题。我发布的代码工作得很好。
回答by domsson
The Google fonts page will actually tell you how to do it and includes a weight select utility. If you want the thinnest style, this is it for Montserrat(different fonts have different weights available):
Google 字体页面实际上会告诉您如何操作，并包含一个权重选择实用程序。如果您想要最薄的样式，这就是蒙特塞拉特的样式（不同的字体有不同的粗细）：
HTML:
HTML：
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
Compare that to yours, it has redundant weights and two errors (href='//instead of href="https://and hininstead of thin)
与你的相比，它有多余的权重和两个错误（href='//而不是href="https://和hin而不是thin）
CSS:
CSS：
font-family: 'Montserrat', sans-serif;
font-weight: 100;
If you want additional weights, add them like this:
如果你想要额外的权重，像这样添加它们：
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">
Remember that you only want to specify those that you are actually going to use, as they will need to be downloaded, hence increasing your page's load time.
请记住，您只想指定实际要使用的那些，因为它们需要下载，从而增加页面的加载时间。
Here is a working example for Montserrat. If 100isn't thin enough for you, you're out of luck.
这是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>