font-family 应优先列出系统字体再放 Web 字体，并设 font-display: swap；避免冗余 font-weight/font-style 组合；用 @layer 和 CSS 状态控制替代 JS 监听。
font-family 里别堆太多字体，优先级顺序直接影响渲染阻塞
浏览器加载字体时，会按 font-family 列表从左到右尝试匹配本地字体；一旦匹配失败，就触发 Web 字体下载。如果列表写成 "PingFang SC, Helvetica Neue, Arial, sans-serif" 这类合理组合，通常能快速 fallback 到系统字体，避免阻塞文本渲染。但若误写为 "CustomFont, Roboto, Noto Sans CJK, serif"，且前三个都需网络加载，就极易触发 FOIT（Flash of Invisible Text）——页面空白几秒，用户以为卡了。
关键点：
- 系统字体必须放在 Web 字体之前，且至少保留一个可靠的 fallback（如
sans-serif或system-ui） - 避免在
font-family中混用中英文全称（如"Microsoft YaHei", "Noto Sans SC"），部分旧版 Safari 会因解析失败跳过整条声明 - 中文场景推荐优先使用
system-ui，它在各平台自动映射最优系统字体（iOS → San Francisco，Android → Roboto，Windows → Segoe UI）
@font-face 的 display 属性必须设为 swap，否则默认 block 会卡住首屏
@font-face 默认的 font-display: block 行为是：字体加载期间，文本完全不可见（FOIT），最长阻塞 3 秒。这对首屏体验是硬伤。改成 swap 后，浏览器立即用 fallback 字体渲染，等自定义字体加载完成再无感替换，彻底消除白屏卡顿。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: swap; /* 必须显式声明 */
}注意：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 不要依赖浏览器默认值——
font-display在未声明时各浏览器行为不一致（Chrome 默认 block，Firefox 默认 auto） -
swap不等于无代价：替换瞬间可能引发重排（layout shift），需配合size-adjust或ascent-override控制字体度量一致性 - 若业务强依赖字体精确尺寸（如设计稿像素级对齐），可考虑
optional+ 预加载 combo，但要接受小概率 fallback
Web 字体加载过程别用 JavaScript 监听 load 事件来控制显示，改用 CSS @layer 或 :is()
过去常用 document.fonts.load() + fontfaceobserver 等 JS 方案控制字体就绪后才显示内容，但这引入额外 JS 执行、延迟 DOM 渲染，且在低端机上易造成长任务卡顿。
现代方案更轻量：
- 用
@layer将字体相关样式隔离，确保其优先级高于普通文本规则 - 利用
:is(.font-loaded) p, .font-loaded p这类选择器，在 HTML 根节点加 class 控制状态，比 JS 操作 class 更快 - 真正需要 JS 干预时，只监听
fontfaceobserver的load事件，而非轮询document.fonts.check()，后者在 Android WebView 中有严重性能抖动
font-weight 和 font-style 别乱配，每个组合都会触发独立字体文件请求
很多人写 font-weight: 600 和 font-style: italic 时，没意识到这可能触发第 3 个字体文件下载——哪怕你只引入了 regular 和 bold 两个 @font-face。浏览器不会自动合成，而是发起新请求，404 后才 fallback，白白增加网络和阻塞时间。
实操建议：
- 只声明实际用到的
font-weight和font-style组合，别写“以防万一” - 用
font-weight: 700替代bold，用font-style: normal显式覆盖继承，避免隐式合成 - 检查字体服务（如 Google Fonts）的 URL 参数，确认是否启用了
&display=swap和&family=xxx:wght@400;700;italic@400这类精准子集加载
字体性能最常被忽略的不是“怎么加载”，而是“谁在触发加载”。一个没声明 font-display 的 @font-face，或一段藏在 display: none 容器里的 h1，都可能偷偷拉取字体并阻塞渲染。防卡顿的关键，是让字体加载行为完全可预测、可收敛。
