为 Google 字体指定样式和权重

我正在使用谷歌字体在我的一些网页和碰壁时，试图使用一种字体的变化。例子: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

我导入三个面，正常，粗体，通过链接标记的 ExtraBold。正常的面显示正确，但是我不知道如何在 CSS 中使用字体的变体

我尝试了以下所有属性作为 font-family 的属性，但没有成功:

  • ‘ Open Sans Bold’
  • ‘ Open Sans 700’
  • ‘ Open Sans Bold 700’
  • “ Open Sans: Bold”

谷歌文档本身并没有提供多少帮助。有人知道我应该如何编写 CSS 规则来显示这些变量吗？

250736 次浏览
小开
最佳答案

他们使用普通的 CSS。

像这样使用你常用的字体:

font-family: 'Open Sans', sans-serif;

现在您可以通过添加来决定字体的“重量”

半大胆

font-weight:600;

粗体(700)

font-weight:bold;

额外加粗(800)

font-weight:800;

像这样它的备份证明，所以如果谷歌字体应该“失败”你的备份字体 Arial/Helvetica (无衬线)使用相同的重量作为谷歌字体。

非常聪明: -)

请注意，不同的字体权重必须通过链接标签 url (google font url 的家庭查询参数)在头部专门导入。

举例来说，以下连结将同时包括重量400及700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

适用于 CSS2

<link href='fonts.googleapis.com/css2?family=Comfortaa:wght@400;700'; rel='stylesheet' type='text/css'>
小开

font-family:'Open Sans' , sans-serif;

灯光: font-weight : 100; 或者 font-weight : lighter;

正常情况: font-weight : 500; 或者 font-weight : normal;

粗体: font-weight : 700; 或者 font-weight : bold;

更大胆的建议: font-weight : 900; 或者 font-weight : bolder;

小开

您可以使用谷歌字体中指定的权重值。

body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}
小开

这就是问题所在: 你不能指定在 Google 的字体集中不存在的字体权重。点击字体下方的 SEE SPECIMEN 链接，然后向下滚动到 STYLES 部分。在那里您将看到每个“样式”可用于特定的字体。遗憾的是，Google 没有列出每种样式的 CSS 字体权重。下面是名称如何映射到 CSS 字体重量数字:

Thin            100
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Extra-Bold      800
Black           900

请注意，只有很少的字体出现在所有9个权重。

小开

API 已经更新，现在您必须使用“ : wght@700”导入所需的字体重量

例如: “ https://fonts.googleapis.com/css2?family=inter:wght@700&display=swap" ;

来源: https://developers.google.com/fonts/docs/css2

小开

如果有人正在寻找使用 多种字体系列 + 重量的最新格式，请参阅下面的内容(例如: w/Open Sans + Roboto)

Https://fonts.googleapis.com/css2?family=open+sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,800&family=roboto:wght@500&display=swap

请注意，最新版本的谷歌字体网络界面有糟糕的用户体验显示的代码样本。有一个“选择的家庭”面板，显示，然后消失，它重叠的字体变化“添加”按钮(加/减符号) ，也位于右边。不直观的解决方案是重新加载页面。


提交答案