一、Network(网络)面板确认
若在 Network 面板中,能看到 kai.woff2 字体文件被加载,且其“启动器(Initiator)”显示为 (预引) 或 link preload ,则说明字体预加载已生效 。
二、检查 HTML 头部 link 标签
打开浏览器开发者工具的「Elements(元素)」面板,查看 <head> 部分,确认存在类似如下的标签(示例,实际按项目配置):
<link rel="preload" href="kai.woff2" as="font" type="font/woff2" crossorigin>
该标签存在,表明浏览器会在解析 HTML 时优先请求字体文件 。
三、检查字体加载优先级
在 Network 面板里,定位到 kai.woff2 字体文件,查看其“优先级”一栏,若显示为“高”或“Highest” ,是预加载带来的效果,说明预加载生效 。
四、性能面板分析(可选)
- 打开浏览器开发者工具的 Performance(性能)面板。
- 点击录制按钮,触发一次页面加载流程。
- 录制结束后,查看
kai.woff2的加载时机,正常情况下,它应在页面渲染前后很早就被发起请求 。