font-display: swap必须写在@font-face规则内才生效，漏写将导致chrome等浏览器默认执行foit（空白闪）；每个字重/样式需单独声明，且须配合format()、preload及metrics相近的fallback字体。
font-display: swap 必须写在 @font-face 里才生效
单独给 .title 或 body 加 font-display: swap 完全无效——它只作用于 @font-face 规则本身。漏掉这一步，浏览器照旧按默认的 block 行为处理：文字区域空白约 3 秒（FOIT），尤其在 Chrome 中非常明显。
正确写法是每个字体变体都显式声明：
@font-face {
font-family: 'Inter';
src: url('inter-var-latin.woff2') format('woff2');
font-display: swap;
}
- 如果用了 Regular、Bold、Italic 多个文件，每个
@font-face都要加font-display: swap - 漏写
format("woff2")或写成format("woff")，部分浏览器会忽略整个规则，font-display也跟着失效 - Google Fonts 链接必须手动加上
&display=swap参数，否则返回的 CSS 里仍是font-display: auto
后备字体选错会导致文字跳动（FOUT）比空白还难受
font-display: swap 解决的是“要不要等”，但换字体时是否跳动，取决于后备字体和 Web 字体的 metrics（字宽、x-height、行高）是否接近。用 "Times New Roman" 当 "Inter" 的 fallback，大概率出现段落重排。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 优先选系统字体栈：
font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; - 避免跨类型混搭：衬线体配无衬线体、等宽体配比例字体，metrics 差异天然大
- 对关键文本容器加
font-size-adjust: 0.5;（需配合font-family中第一个字体支持该属性）可锁定 ex 高度比例，大幅缓解跳动
不预加载，swap 的“立即显示”就只是理论上的
移动端弱网下，swap 常表现为：文字先用系统字体正常显示 → 滚动半屏后突然上移/下移一帧 → 才稳定。这不是 bug，是字体文件还没下载完就被替换了。
- 必须在
最前面加预加载：<link rel="preload" href="inter-var-latin.woff2" as="font" type="font/woff2" crossorigin> -
crossorigin缺失会导致预加载静默失败，尤其用 CDN 时 - 不要用
as="style"或漏掉as属性，否则降级为普通 fetch，失去高优先级 - WOFF2 格式必须优先；TTF/OTF 在 iOS 上解析慢，会拉长 swap 窗口
document.fonts.ready 不是可选项，而是兜底判断依据
font-display: swap 只控制渲染时机，不保证字体“真正可用”。比如字体文件损坏、404、或 CORS 阻止加载，swap 仍会触发替换，但实际没换成功，导致文字模糊或回退到更远的 fallback。
- 用
document.fonts.load("1em Inter")主动触发加载，并监听document.fonts.readyPromise - 监听失败时可降级处理，比如加 class 切换备用样式，或上报字体加载异常
- 本地开发必须走
http://服务，file://协议下document.fontsAPI 直接不可用
crossorigin。这两个点不处理，font-display: swap 就只是把 FOIT 换成更难调试的 FOUT。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
