Web Font Loader无法正确预加载指定字重字体的问题排查

问题出在自定义字体的变体配置格式错误，不符合Web Font Loader的解析规则。

你在custom.families中填写的"TeX Gyre Adventor:700n"是非法格式：Web Font Loader规定自定义字体的变体描述，样式标识要放在字重数值前面，n代表常规（normal）样式，i代表斜体（italic）样式。把字重700写在样式标识n前面，会导致加载器无法识别你指定的700字重加载需求，自动回退到默认加载目标——也就是400字重常规正体。

这就解释了两个现象：

• 你没有主动请求400常规字重，但浏览器主动拉取了regular版本的字体文件：这是加载器解析配置失败后的默认回退行为
• 你指定的700粗体在active事件触发时没有加载完成：加载器根本没有把700字重加入加载监听队列，只等默认回退的400字重加载完成就触发了active事件。后续粗体文件被拉取，是浏览器渲染页面时检测到实际存在font-weight: 700的文本，触发了原生的字体加载逻辑，和Web Font Loader的预加载流程无关。

不需要额外添加preload标签，只需要修正字体变体的配置写法即可。

如果你只需要加载700字重的常规正体，将families配置项修改为以下任意一种合法写法即可：

"families": [
    "TeX Gyre Adventor:n7"
]

如果需要同时加载多个字重/样式，用逗号分隔即可，比如同时加载400、700两个常规正体字重的写法为：

"families": [
    "TeX Gyre Adventor:n4,n7"
]

修正后的完整配置参考：

var WebFontConfig = {
    "timeout": 3000,
    "classes": false,
    "custom": {
        "families": [
            "TeX Gyre Adventor:n7"
        ],
        "urls": [
            "./css/fontstuff.css"
        ]
    },
    active: function () {
        // 配置正确时，此处触发时所有指定字体变体都已加载完成，无需额外加延迟
        nowDoOtherStuff();
    }
};

WebFont.load(WebFontConfig);

附：Web Font Loader自定义字体常见变体写法参考

• n4/400：400字重常规正体
• n7/700：700字重粗体正体
• i4/400i：400字重常规斜体
• i7/700i：700字重粗体斜体

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