怎么利用HTML的link rel="preload" as="font"预加载自定义字体文件-html教程-PHP中文网

只有当字体被@font-face引用且首屏立即使用时才该用link rel="preload"；必须加crossorigin属性，href和type需与@font-face完全一致，并配合font-display:swap。

$怎么利用html的link rel=\$

只有当字体文件被 CSS 中的 @font-face 引用，且你明确知道它会在首屏渲染中立即使用（比如标题、正文主字体），才值得预加载。如果只是页面底部模块或交互后才显示的字体，预加载反而浪费带宽和连接数。

常见误用场景：把所有 @font-face 对应的字体都加上 preload；或者在未声明 crossorigin 的情况下预加载跨域字体（导致浏览器拒绝应用）。

绝大多数自定义字体（尤其是托管在 CDN 或不同域名下）属于跨域资源。浏览器对字体文件的加载有严格 CORS 要求：即使只是预加载，也必须声明 crossorigin，否则字体虽能下载，但后续 @font-face 无法复用该请求，造成重复下载甚至 FOIT/FOUT 加剧。

预加载不会自动绑定到某个 @font-face 块，浏览器只按 as="font" + type + URL 完全一致来复用缓存。所以要注意：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

href 必须和 @font-face src: url(...) 中的路径**完全相同**（包括查询参数、大小写、斜杠结尾）
推荐显式指定 type，例如 type="font/woff2"，避免浏览器因 MIME 类型不匹配而忽略复用
as="font" 是必须的，不能写成 as="script" 或留空
字体格式优先级要一致：如果 @font-face 中 src 列了 woff2 在前、woff 在后，那 preload 应该只预加载 woff2 版本

示例：

<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous">

对应 CSS 中：

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
}

预加载只是让字体文件尽早开始下载，但真正“可用”还依赖两个关键点：CSS 解析完成 + 浏览器触发字体下载（即使已 preload）+ 渲染引擎应用字体。容易被忽略的断点：

CSS 文件本身没预加载或阻塞严重，导致 @font-face 规则迟迟不解析
字体文件体积过大（>100KB），即使预加载，下载+解码仍耗时；可考虑子集化或降级 fallback
用了 font-display: block（默认值），会强制等待字体加载完成才显示文字；生产环境更推荐 font-display: swap 配合 preload，兼顾性能与体验
开发者工具 Network 面板里看 Initiator 列：确认字体请求来源是 preload 而非 css，否则说明 URL 不匹配或 crossorigin 缺失

真正起效的组合往往是：preload + font-display: swap + 尽早内联关键 CSS（含 @font-face）。