rel="preload"是字体预加载的强制前提，as="font"仅在此时生效；必须配合crossorigin、type="font/woff2"及与@font-face完全一致的href路径，否则静默失效。
link标签as="font"必须配合rel="preload"
单独写 <link rel="stylesheet" as="font" ...> 不会触发字体预加载，浏览器直接忽略 as 属性。只有 rel="preload" 时，as="font" 才生效，且仅用于提前获取字体资源。
-
rel="preload"是强制前提，其他rel值（如stylesheet、icon）下as="font"无意义 - 常见错误：把字体
preload和 CSS 文件preload混在一起写成同一个<link>，实际必须拆成两条 - 若字体在 CSS 中通过
@font-face引用，但未显式preload，浏览器会在解析 CSS 后才发起字体请求，造成 FOIT/FOUT 延迟
字体格式必须与实际文件匹配，否则预加载失败
as="font" 不是类型提示，而是资源类型断言。浏览器会根据 type 属性或响应头的 Content-Type 校验 MIME 类型，不匹配就丢弃预加载结果。
- WOFF2 必须用
type="font/woff2"；WOFF 用font/woff；TTF 用font/ttf（注意不是application/x-font-ttf） - 省略
type时，依赖服务器返回的Content-Type，但很多 CDN 默认不设或设错，建议始终显式声明 - Chrome 会拒绝加载
type错误的预加载字体，且控制台报Failed to find a MIME type for类错误
crossorigin属性不能省，尤其字体托管在CDN时
字体是跨域资源，即使同源也建议加 crossorigin，否则预加载后无法被 CSS 的 @font-face 复用——浏览器会当作两个独立请求处理。
- 必须写
crossorigin（空值即可），不能写crossorigin="anonymous"或"use-credentials"以外的值，后者会导致预加载失败 - CDN 返回的字体响应头需包含
Access-Control-Allow-Origin: *（或具体域名），否则字体加载阶段报 CORS 错误 - 漏掉
crossorigin是最隐蔽的坑：页面看似正常，但字体渲染延迟明显，Network 面板里能看到重复请求
preload的字体URL必须和@font-face中src的URL完全一致
哪怕只是查询参数顺序不同、末尾多一个斜杠，浏览器都认为是不同资源，不会复用已预加载的字体。
立即学习“前端免费学习笔记（深入）”；
- 检查
<link as="font">的href与@font-face src: url(...)中的路径是否逐字符相同 - 避免动态拼接 URL（如
url('/fonts/icon.woff2?v=' + VERSION)），预加载时无法同步版本号 - 使用相对路径时注意基准 URL 是否一致（比如 HTML 在根目录，CSS 在
/css/下，@font-face里的相对路径会相对于 CSS 文件位置解析）
