"字体预加载与 CORS：link rel=preload 的跨域与 MIME 要求"

概述预加载关键字体可显著减少首次文本渲染等待，但需要正确的跨域与 MIME 设置，否则浏览器可能忽略或重复请求。本文给出 `rel=preload` 在字体上的用法与注意。用法与要求链接：`<link rel="preload" as="font" href="/fonts/Inter.woff2" type="font/woff2" crossorigin>`［参考1,2］。`as="font"` 与 `type="font/woff2"`：帮助浏览器进行缓存与优先级处理；`type` 不正确可能导致预加载无效或重复下载［参考2］。跨域：字体常在 CDN 上，需 `crossorigin` 与服务器返回 CORS 头（如 `Access-Control-Allow-Origin`）；否则字体可能被拒绝或与预加载的缓存不共享［参考1］。工程实践与 `font-display` 协作：`swap/fallback/optional` 降低 FOIT 风险；结合预加载提升渲染稳定性。PWA 场景：将字体纳入预缓存并设置版本化；注意缓存与预加载的协作与重复请求避免。参考与验证［参考1］MDN 中文：`<link rel="preload">` 与 `as`、`crossorigin` 说明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link/preload［参考2］web.dev：字体预加载指南与 MIME/跨域注意：https://web.dev/articles/preload-fonts关键词校验关键词覆盖字体预加载与跨域要求，与正文一致。