应使用 预加载首屏关键字体，需同时指定 as="font"、crossorigin（即使为空）、type，且 href 必须与 @font-face 中 src 完全一致，确保早期加载、避免 FOIT/FOUT。
可以通过 提前加载关键字体，让浏览器在渲染前就发起请求，避免文字闪动（FOIT/FOUT）或延迟渲染。
确保使用正确的 rel 和 as 属性
字体预加载必须同时指定 rel="preload" 和 as="font"，并添加 type 和 crossorigin 属性，否则浏览器可能忽略或加载失败：
-
as="font"告诉浏览器资源类型，影响优先级和缓存策略 -
crossorigin必须存在（即使值为空），因为字体是跨域资源，缺失会导致加载被拒绝 -
type推荐显式声明（如type="font/woff2"），帮助浏览器跳过 MIME 类型探测
只预加载实际使用的字体文件
不要为所有字重/样式都预加载，仅针对 CSS 中 @font-face 定义且页面首屏立即用到的字体变体：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 例如：若首屏只用
font-weight: 700的Inter Bold，就只 preload 对应的 WOFF2 文件 - 避免预加载未使用的
light、italic等变体，否则浪费带宽并挤占关键资源带宽 - 确保
href路径与@font-face src中的路径一致（包括版本参数、CDN 域名等）
配合 @font-face 正确声明字体
预加载本身不启用字体，必须在 CSS 中通过 @font-face 注册，且 src 的 URL 要与 的 href 完全匹配（含查询参数）：
- HTML 示例：
- CSS 示例：
@font-face { font-family: 'Inter'; font-weight: 700; src: url('/fonts/inter-bold.woff2') format('woff2'); } - 如果 CSS 中用了
url('/fonts/inter-bold.woff2?v=1.2')，那么的href也必须带相同参数
验证是否生效
打开浏览器开发者工具 → Network 面板，筛选 font，刷新页面：
- 预加载的字体应出现在早期（通常在 HTML 解析阶段就发起），Status 显示
200或206，Initiator 标为preload - 检查 Timing 标签页，确认
Start Time非常靠前，Download时间短且无排队延迟 - 若字体未出现或显示
cancelled，常见原因是crossorigin缺失、as值错误，或服务器未返回正确的 CORS 头（如Access-Control-Allow-Origin: *）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
