is_*_*ken 3 html css fonts google-webfonts
谷歌服务的字体像蒙特塞拉特有很多不同的风格:薄,超轻,轻,常规等...
我找不到用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存在字体问题.我发布的代码工作得很好.
dom*_*son 11
Google字体页面实际上会告诉您如何操作,并包含一个权重选择实用程序.如果你想要最薄的款式,就是这样:
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">
请记住,您只想指定实际要使用的那些,因为它们需要下载,因此会增加页面的加载时间.
这是一个有效的例子.如果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 代码。
我在我的反应项目中使用这种字体。
从谷歌字体导入或链接字体。我的看起来像这样
<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;
}