Google Fonts引入Nunito Sans时font-weight字重设置不生效如何解决

Nunito Sans多字重失效是因为Google Fonts引入链接的参数配置错误，没有加载到所需的正体300字重：

• Google Fonts可变字体的引入参数格式为ital,wght@<样式编码>,<字重值>，其中样式编码0代表常规正体，1代表斜体
• 原有引入链接的参数为0,600;0,800;1,300，仅加载了3个字体变体：正体600、正体800、斜体300，完全没有加载需要用到的正体300字重
• 浏览器匹配不到对应正体字重时，会调用已加载的正体字重做伪粗/伪细渲染，最终所有段落显示字重一致。其他字体未出现同类问题，通常是因为引入时默认加载了全量字重，不存在变体缺失的情况。

调整Google Fonts引入链接的参数，把实际用到的正体字重全部加入加载列表即可，原有CSS代码不需要改动。

修复后的字体引入代码 #

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 加载正体300、600、800三个需要用到的字重 -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,600;0,800&display=swap" rel="stylesheet">

原有CSS无需调整，保持如下写法即可正常生效 #

p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 32px;
}

.p1 {
  font-weight: 300;
}

.p2 {
  font-weight: 600;
}

.p3 {
  font-weight: 800;
}

• 如果后续需要使用对应字重的斜体样式，在链接参数里追加1,<对应字重值>即可，例如需要斜体600就补充1,600配置
• 引入Google Fonts时不要直接复制默认链接，要在字体选择页手动勾选所有需要用到的字重和样式，平台会自动生成正确的引入链接，避免漏加载字体变体。

内容的提问来源于stack exchange，提问作者sofuslund