font-display: swap仍会闪是因为fallback与自定义字体在line-height、ascent、descender等度量上不一致，导致替换时重排；必须配合size-adjust或ascent-override、preload（带crossorigin）、同类型fallback链及正确mime类型才能消除抖动。
font-display: swap 为什么还会闪——fallback 字体度量不一致
写了 font-display: swap 却仍看到文字“跳一下”，不是 CSS 没生效，而是 fallback 字体（比如系统 San Francisco、Segoe UI、Noto Sans）和图标字体在 line-height、ascent、descender 上根本对不上。浏览器先用系统字体撑开行高，等图标字体一加载，字形实际占位变了，整个行框重排，用户就感知为“闪动”或“下沉”。
- 别只改
font-display，必须同步检查@font-face中是否设置了size-adjust或ascent-override - 用 Chrome DevTools → Rendering → 勾选 “Layout Shift Regions”，直接圈出跳动区域
- 如果图标字体是 WOFF2 格式且嵌入了 OS/2 表，优先用
descender-override: -256;（数值来自opentype.js解析结果） - 避免在外部 CSS 里用
font-size: 1.2em强制缩放图标字体——这会让 fallback 和 target 的基线彻底错位
图标字体必须 preload，但 crossorigin 不能漏
图标字体文件（如 iconfont.woff2）若没被 <link rel="preload"> 提前拉取，在弱网下首次渲染时大概率来不及参与首屏布局，导致图标位置先显示空白或方块，等字体就绪后才“啪”一下弹出来——这就是典型的加载态闪动。
-
<link rel="preload" as="font" href="/fonts/iconfont.woff2" crossorigin>——crossorigin属性必须写，哪怕字体同源；WOFF2 加载强制跨域模式，缺它等于白 pre -
href必须和@font-face中src的路径完全一致（含查询参数，如?v=2.1） - 只 preload WOFF2；别加 WOFF/TTF，浏览器不会复用
- 把 preload 放在
最顶部，早于任何 CSS 或 JS
按钮禁用态下旋转图标停转？pointer-events 被连带禁用了
给按钮加 disabled 后插入 <i class="icon-spin"></i>，发现旋转动画在 Safari 和旧版 Chrome 里卡住不动——这不是动画写错了，而是原生 button[disabled] 会递归禁用所有子元素的 pointer-events，而部分浏览器会顺手暂停其 CSS 动画。
- 不要用
button[disabled]包裹图标；改用aria-disabled="true"+ 手动设opacity: 0.5+cursor: not-allowed - 确保旋转类
.icon-spin的animation声明中不含animation-play-state: paused等可能被继承的值 - 若必须保留
disabled，可对图标元素显式覆盖：.icon-spin { pointer-events: auto; animation-play-state: running; }
本地托管 vs CDN 图标字体：闪动风险差在哪
用 CDN（如 fonts.googleapis.com）加载图标字体，一旦网络抖动或 DNS 慢，就会触发 FOIT（空白等待）或 FOUT（先方块后图标），而本地托管看似可控，却容易忽略两个隐形坑：缓存策略和 MIME 类型。
- CDN 方案：必须配
font-display: optional+ fallback 字符（如●），比留白好；同时加<link rel="preconnect" href="https://fonts.gstatic.com"> - 本地方案：确保服务器返回正确 MIME 类型（
font/woff2），否则 Chrome 会拒绝解析；Nginx 需加types { font/woff2 woff2; } - 更稳的选择是 inline SVG：把图标转成
<svg><path></path></svg>直接嵌入 HTML，彻底绕过字体加载链路 - 若用字体，优先选本地 +
font-display: block（3s 超时后降级），而非依赖 CDN 的swap——后者在慢网下 fallback 渲染时机不可控
crossorigin 少写一个字母，动画就静默失效。这些点不报错、不抛异常，只在特定设备或网络条件下悄悄破坏体验。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
