字体加载失败时应通过font-display: fallback、独立font-family名、preload+crossorigin、class触发content注入及伪元素降级等策略确保图标可读，而非依赖加载完成。
字体加载失败时 fallback 到系统图标字体
图标字体（如 Font Awesome）在弱网下常表现为方块或乱码，本质是字体文件未加载完成，浏览器用系统默认字体（如 Arial、SimSun）渲染 Unicode 字符，而这些字符在系统字体里根本不存在——于是显示为□或。解决核心不是“等它加载完”，而是让浏览器知道：“这个图标没加载出来时，该用什么替代”。
-
font-display: fallback必须加在每个@font-face规则里，不能只写在主字体上；图标字体通常有多个字重（regular / solid / brands），每个都得单独声明 - fallback 的 500ms 窗口必须被真正利用：不配
<link rel="preload" as="font">，字体请求可能刚发起就超时，用户永远看不到图标 - 预加载必须带
crossorigin属性，尤其 CDN 或 SaaS 字体服务（如 fontawesome.com），否则跨域请求直接失败，@font-face后续也会报 CORS 错误
避免用 Unicode 字符直接写 HTML
写 <i class="fa-solid fa-home"></i> 是安全的，但写 <span></span> 就危险——一旦字体没加载，浏览器只能按当前字体解析这个私有 Unicode 码位，大概率显示为方块。
- 所有图标必须通过 class 触发，由 CSS 的
content: "\f015"注入，这样即使字体失败，元素本身仍存在，可配合::before伪元素降级样式（比如显示文字“首页”） - 禁用
font-family: "Font Awesome";直接作用于文本容器（如<p></p>），否则整段文字都可能因字体缺失而集体乱码 - 如果必须用内联 Unicode（如 CMS 输出不可控），至少包裹一层
span[aria-hidden="true"]并设font-family: system-ui, sans-serif强制回退
中文字体混排时图标字体要独立声明
很多项目把图标字体和正文字体共用一个 font-family 名（比如都叫 "icon-font", "PingFang SC"），这会导致浏览器把图标字体当成正文后备字体——一旦中文字体体积大、加载慢，图标也会被卡住，甚至被 font-display: optional 直接跳过。
- 图标字体必须用独立
font-family名，例如font-family: "fa-icons"，且只用于图标相关 class - 正文字体栈里不要混入图标字体名，哪怕只是放在末尾：“
"Helvetica Neue", "PingFang SC", "fa-icons", sans-serif” 是典型错误 - 构建时用工具（如
font-spider或手动子集化）删掉图标字体里所有中文字符和冗余 glyph，把体积压到 20–50KB 以内，显著提升弱网下的加载成功率
iOS Safari 下图标闪烁/重绘异常
在 iOS Safari 中，图标字体容易出现“先显示方块、再闪成图标”的 FOUT（Flash of Unstyled Text），或者点击后图标变细/偏移——这不是缓存问题，而是字体加载与重排时机错位。
- 给图标容器设固定宽高（如
width: 24px; height: 24px;），避免字体替换时触发 layout shift - 禁用
-webkit-font-smoothing: subpixel-antialiased，改用antialiased，防止小尺寸图标在 OLED 屏上因亚像素渲染失真 - 避免对图标元素使用
transform: scale()或em单位尺寸，iOS WebKit 对字体缩放的重绘逻辑不稳定，优先用px或rem
crossorigin、共用 font-family、直接写 Unicode，这三处任一出错，方块就会准时出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
