本地图标字体加载失败主因是路径错误、MIME类型未配置或woff2兼容性不足；需确保CSS中url路径相对、服务器返回正确font/woff2等MIME类型、iOS兼容补woff/ttf、必设font-display:swap或block，并显式定义font-size和line-height。
font-face 引入本地图标字体失败的常见原因
直接用 @font-face 加载本地图标字体（比如 iconfont.woff2）却显示方块或空白，大概率不是代码写错了，而是路径、MIME 类型或字体格式兼容性出了问题。
关键点：移动端浏览器（尤其是 iOS Safari）对本地字体加载更敏感，file:// 协议下几乎必挂，必须走 HTTP/HTTPS 服务；另外，只放 .woff2 不够，iOS 14 之前不支持 woff2，得补 woff 或 ttf。
-
src中的路径必须相对于 CSS 文件位置，不是 HTML 页面——比如 CSS 在/css/style.css，字体在/fonts/icon.woff2，那url(../fonts/icon.woff2)才对 - Web 服务器必须返回正确的 MIME 类型：
font/woff2、font/woff、font/ttf，Nginx/Apache 需手动配置，否则 iOS 会静默拒绝加载 - 别用绝对路径如
url(/fonts/icon.woff2)测试本地文件双击打开，那走的是file://协议，Safari 直接禁掉字体加载
CSS 里定义 iconfont 类名时容易漏掉 font-display
font-display: block 不是可选项，是移动端图标字体可用的前提。没它，iOS Safari 可能等字体加载完才渲染文字，导致图标闪一下才出现，或者干脆 fallback 到系统字体（显示成方块）。
实操建议只用 font-display: swap 或 font-display: block：
立即学习“前端免费学习笔记（深入）”；
-
swap：字体加载中先显示 fallback（比如空心方框），加载完立刻替换——适合图标语义强、不能错位的场景 -
block：短时间隐藏，之后无论是否加载成功都显示——适合图标非关键、允许短暂空白的页面 - 别用
auto或不写，iOS 默认行为就是“等”，用户划屏时图标还没出来
示例片段：
@font-face {
font-family: 'my-icon';
src: url('../fonts/icon.woff2') format('woff2'),
url('../fonts/icon.woff') format('woff');
font-display: swap;
font-weight: normal;
font-style: normal;
}
图标 Unicode 编码在移动端渲染错位或重叠
用 这种 Unicode 方式插入图标，在 Android 和 iOS 上表现不一致，常见问题是图标上下偏移、行高塌陷、或和文字挤在一起。
根本原因是字体未声明 font-size 和 line-height，浏览器按文本默认基线对齐，而图标字体设计时通常以 em-box 中心为基准。
- 所有图标类必须显式设
font-size（比如16px），不能依赖父级继承 - 加
line-height: 1防止换行撑开高度；再配vertical-align: middle或-0.125em微调基线 - 避免把图标放在
<span></span>里混排文字——改用伪元素::before更可控，例如：.icon-home::before { content: '\e601'; } - Unicode 值要转成十进制或十六进制实体，不要直接写
\ue601在 CSS 里——有些构建工具会误解析
Vue/React 项目里动态插入图标类名失效
在组件里拼接字符串给 class，比如 :class="'icon-' + type"，结果图标不显示，大概率是字体文件没被正确打包或 public 路径没对上。
Webpack/Vite 对 url() 的处理逻辑不同，静态资源路径容易断链：
- Vite 项目中，字体放在
public/fonts/下，CSS 里写url(/fonts/icon.woff2)才能命中；放src/assets/fonts/则需用url('@/assets/fonts/icon.woff2')并确保 loader 配置了字体类型 - Vue SFC 的
<style scoped></style>不影响@font-face，但如果你把@font-face写在 scoped style 里，某些版本会把它也加属性选择器，导致失效——必须写在非 scoped style 或单独 CSS 文件中 - 检查最终生成的 CSS 文件里
src的 URL 是否是可访问路径，用浏览器 Network 面板看字体请求是不是 404 或 CORS
事情说清了就结束
