开发工具中渲染字体信息的“Nunito ExtraLight”而不是“Nunito”

Question

有人可以解释一下为什么在这种情况下 Chrome 渲染 Nunito ExtraLight ，而它在任何地方都没有定义吗？

源代码：

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
body {
  font-family: "Nunito", sans-serif;
}

TEXT

Chrome 开发工具：

我试过这个：

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap');

但是结果是： Nunito ExtraLight 中号

有人可以向我解释我做错了什么吗？我不想要 ExtraLight 字体。

Answer 1

浏览器使用：存储在字体文件中的字体系列名称并不重要

只要谷歌字体CSS查询返回有效

@font-face

规则（正确映射不同的样式/粗细） – 忽略这个问题。

当然，在开发工具中看到渲染的字体名称有点令人困惑，例如：

• “Nunito ExtraLight”灯
• “Nunito ExtraLight”常规
• “Nunito ExtraLight”中号

其中 woff2/woff/truetype 名称记录中指定的“固有”字体系列名称还包括应保留用于样式/粗细信息的术语，如“ExtraLight”。

但是，这并不重要，因为浏览器只关心将特定字体文件映射到的有效

@font-face

规则：

1. 字体系列
2. 字体样式（常规或斜体）
3. 字体粗细（例如 100–900）

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900');
body {
  font-family: 'Nunito'
}

.w200 {
  font-weight: 200
}

.w300 {
  font-weight: 300
}

.w400 {
  font-weight: 400
}

.w500 {
  font-weight: 500
}

.w600 {
  font-weight: 600
}

.w700 {
  font-weight: 700
}

.w800 {
  font-weight: 800
}

.w900 {
  font-weight: 900
}

<p class="w200">Hamburgefons</p>
<p class="w300">Hamburgefons</p>
<p class="w400">Hamburgefons</p>
<p class="w500">Hamburgefons</p>
<p class="w600">Hamburgefons</p>
<p class="w700">Hamburgefons</p>
<p class="w800">Hamburgefons</p>
<p class="w900">Hamburgefons</p>

Google 字体 API 请求是动态的

换句话说：完全相同的 google fonts css URL 可能会在例如之后返回不同的文件源。 2年。
...更不用说“浏览器嗅探”了——例如，使用 Opera 时返回静态字体而不是可变字体（也许用户代理查找仍然基于旧的 presto 渲染引擎数据？）

因此您可以安全地忽略此问题 - 当为本机应用程序使用字体时，这可能更重要。

Nunito 也因其兄弟“Nunito Sans”而引起了一些“混乱”。两种字体不应混淆。