HTML网页中link标签的as属性在关键字体文件预加载中的作用-html教程-PHP中文网

as="font"是唯一能绑定@font-face的取值，因浏览器仅为此值触发专用fontloader流程；其他as值使资源进入普通缓存池，无法被字体引擎识别，导致重复下载和foit。

html网页中link标签的as属性在关键字体文件预加载中的作用

as 属性不是可选的装饰，它是浏览器决定“怎么加载、用什么策略加载、加载完能不能复用”的开关。对字体文件来说，漏写或写错 as，rel="preload" 就等于没写。

为什么 `as="font"` 是唯一能绑定到 `@font-face` 的取值

浏览器为字体维护了一套独立加载流程（FontLoader），只有 as="font" 才会触发它。其他值比如 as="fetch" 或 as="script" 会让资源进普通 HTTP 缓存池，后续 @font-face 即使 URL 完全一致，也认不出这是个字体——结果就是重复下载，FOIT 照旧。

as="font" → 自动加 Accept: font/woff2,*/*，校验服务端返回的 Content-Type，启用 CORS 检查和高优先级调度
as="fetch" → 发 Accept: */*，哪怕响应头是 font/woff2，字体引擎也跳过不处理
as="style" 或 as="script" → 请求走对应缓存分区，@font-face 根本不会去那里找

`as="font"` 必须配 `crossorigin`，哪怕同源

字体加载强制要求 CORS 上下文，浏览器不会“自动降级”。漏掉 crossorigin，即使字体和 HTML 同域，已下载的数据也会被丢弃，@font-face 会重新发起一次带 CORS 头的请求——你看到 Network 里有两个请求，但控制台无报错，只表现为文字空白。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

✅ 正确写法：<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>（crossorigin 无等号无值）
❌ 无效写法：<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2">（漏 crossorigin）
⚠️ 风险写法：<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">（非必要，部分 CDN 可能因头校验严格而拒绝）

路径必须字符串完全一致，连查询参数都不能差

浏览器判断预加载资源能否被 @font-face 复用，靠的是 URL 字符串完全相等，不是语义匹配。构建工具自动注入哈希或版本号时，极易踩坑。

如果 @font-face 中写的是 url('/fonts/inter.woff2?v=2.1')，但 <link> 的 href 是 /fonts/inter.woff2，就不会复用
大小写、末尾斜杠、协议（http:// vs https://）、域名（www.example.com vs example.com）任意一处不同，都算两个资源
即使服务端做了 301 重定向，浏览器也不认为它们是同一个 URL