Google Fonts：如何为指定字重加载完整字形，仅某一字重加载特定字形

我之前也踩过这个坑！Google Fonts的规则里，如果你把不同字重的需求混在同一个link标签里，text参数会作用于所有字重；而如果在一个链接里写多个family=参数，后面的会直接覆盖前面的，所以才会出现你说的失效情况。

正确的做法是分开写两个独立的<link>标签，分别对应不同的字重组需求：

<!-- 加载400、700字重的完整Nunito Sans字形 -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">

<!-- 仅加载900字重的"HEADER"特定字形 -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@900&text=HEADER&display=swap" rel="stylesheet">

这样浏览器会分别解析这两个字体请求：第一个请求会拉取400和700字重的全部字符，第二个只拉取900字重下的"HEADER"字符，两者不会互相干扰，完全符合你的需求。

你可以测试一下：给元素设置font-weight: 400或700时，能显示任意字符；设置font-weight: 900时，只有"HEADER"这些字符能正常渲染，其他字符会回退到系统字体（如果没其他 fallback 字体的话），这就说明配置生效了。

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