html字体预加载

什么是字体预加载

字体预加载（Font Preloading）是一种优化网页性能的技术，通过提前加载网页所需的字体文件，减少后续页面渲染时的字体加载延迟，尤其在使用网络字体（如Google Fonts）时，预加载可缓解初次渲染时的“闪屏”（FOIT，Flash of Invisible Text）或“闪烁”（FOUT，Flash of Unstyled Text）问题。

<link rel="preload" href="字体文件URL" as="font" type="字体MIME类型" crossorigin>

示例代码

预加载本地字体

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/fonts/my-font.css">

预加载网络字体（如 Google Fonts）

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="style" onload="this.onload=null;this.href+='&display=swap'">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

关键注意事项

1. 预加载 vs 常规加载

   • 预加载仅提前请求资源,不会自动应用，需配合常规 <link> 标签引入字体。
   • 适用于关键字体（如正文字体），非必要字体不建议预加载。

2. 跨域问题
   若字体文件跨域，需确保服务器启用 CORS（如 Access-Control-Allow-Origin: ），否则浏览器会拒绝加载。

   

   1. 确保字体服务器配置了 CORS 头（如 Access-Control-Allow-Origin: ）。
   2. 检查 crossorigin 属性值是否正确（anonymous 或 use-credentials）。
   3. 若仍失败,可回退到本地托管字体，或延迟加载字体并显示后备字体（如 font-family: sans-serif