为 Google 字体指定样式和粗细

他们使用常规的 CSS。

只需像这样使用您的常规字体系列：

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

现在您通过添加来决定字体应该具有的“重量”

半粗体

font-weight:600;

粗体 (700)

font-weight:bold;

加粗 (800)

font-weight:800;

像这样它的后备证明，所以如果谷歌字体应该“失败”你的备份字体 Arial/Helvetica(Sans-serif) 使用与谷歌字体相同的权重。

很聪明:-)

请注意，必须通过标题中的链接标签 url（google 字体 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'>

---

这是问题所在：您无法指定 Google 字体集中不存在的字体粗细。单击字体下方的 SEE SPECIMEN 链接，然后向下滚动到 STYLES 部分。在那里，您将看到该特定字体可用的每种“样式”。遗憾的是，谷歌没有列出每种样式的 CSS 字体粗细。以下是名称映射到 CSS 字体粗细数字的方式：

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

请注意，所有 9 种权重都很少有字体。

---

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;

---

API 已更新，现在您必须使用 ":wght@700" 导入所需的字体粗细

例如：“https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap”

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

---

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

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

---

如果有人正在寻找具有多种字体系列 + 粗细的最新格式，请参见下文（例如，带 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

请注意，最新版本的 google 字体 Web 界面在显示代码示例时 UX 很差。有一个“选定的系列”面板显示然后消失，它与字体变体“添加”按钮（加号/减号）重叠，这些按钮也位于右侧。不直观的解决方案是重新加载页面。

---