如何通过Google字体(例如，稀薄，特亮)使用CSS的特定字体样式. [英] How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)
问题描述
由Google提供的字体，例如蒙特塞拉特具有许多不同的样式: 薄，特轻，轻，规则等...
Google served font like Montserrat has a lot of different styles: Thin, Extra-Light, Light, Regular, etc...
我找不到用CSS指定样式的方法. 使用Font-weight只能访问其中的一些内容，如在 CodePen
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
<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样式，但是最轻巧的是常规样式.
I want to use the Extra-Light style, but regular is the lightest I get.
对此有直接解决方案吗?
Is there a straight forward solution to this?
更新: 这是浏览器问题.我的Chrome浏览器出现字体问题.我发布的代码效果很好.
Update: It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.
推荐答案
Google字体页面实际上会告诉您如何操作，并包括一个粗细选择实用程序.如果您想要最薄的样式，请使用 Montserrat (不同的字体具有不同的粗细):
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):
HTML:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
将其与您的相比，具有多余的权重和两个错误(href='//代替href="https://，hin代替thin)
Compare that to yours, it has redundant weights and two errors (href='// instead of href="https:// and hin instead of thin)
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.
这是蒙特塞拉特的一个有效示例.如果100不足以适应您，那么您就不走运了.
Here is a working example for Montserrat. If 100 isn't thin enough for you, you're out of luck.
* {
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>
这篇关于如何通过Google字体(例如，稀薄，特亮)使用CSS的特定字体样式.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
