最稳方案是改三处：font-family全小写、字体路径为/static/绝对路径、用标签并显式声明font-family；否则图标显示方块或空白，因uni-app各端路径解析不一致且font-family被自动转小写导致匹配失败。
直接用 iconfont 最稳，但必须改三处：font-family 全小写、字体路径全为 /static/ 绝对路径、font-family；否则图标显示方块或空白，控制台无报错，查半天发现是名字被自动转小写导致匹配失败。
为什么改了路径还是不显示图标？
uni-app 各端解析字体路径规则不一致：
- H5 端能识别
url('./iconfont.woff')这类相对路径 - 微信小程序只认
url('/static/fonts/iconfont.woff')这种以/static/开头的绝对路径，相对路径直接忽略 - App 端构建后可能因路径映射变化导致 404，尤其用 vite 模式时
static目录不会自动拷贝到unpackage/dist/build/app-plus/static/
实操建议：
- 把所有字体文件（
iconfont.woff、iconfont.woff2、iconfont.ttf）统一放进static/fonts/目录 - 打开下载的
iconfont.css，全局替换所有url(为url('/static/fonts/iconfont.woff')（注意保留format('woff')等声明） - 如果用了多个格式，每个
url()都要改，漏一个就可能在某端失效
font-family 名字为什么必须全小写？
uni-app 编译器（HBuilderX 或 vue-cli）会强制把 @font-face 中的 font-family 值转成小写。而 iconfont 官网生成的 CSS 里常含不可见空格或大小写混用，比如 "IconFont" 或 "iconfont "（末尾有空格），结果加载后实际注册的字体名是 "iconfont"，但 CSS 里仍按原样匹配，导致失败。
实操建议：
- 用编辑器开启「显示空白字符」功能，搜索
font-family:，把所有引号内值手动改成纯小写、无首尾空格，例如"IconFont"→"iconfont" - 不要用线上地址引入
iconfont.css，直接在App.vue的里@import "@/static/fonts/iconfont.css" - 确认最终生效的
font-family是iconfont：打开浏览器开发者工具 → 「计算样式」→ 找当前图标元素的font-family值
为什么 class="iconfont icon-home" 不生效？
uni-app 的 font-family，图标类（如 .icon-home）只提供 content: "\e601"，没字体族就渲染不出图形。
实操建议：
- 优先用
- 在样式中为
.iconfont显式声明：font-family: 'iconfont' !important; - 若非要用
style="font-family: 'iconfont'"，仅靠 class 不行 - 别抄
demo_index.html里的旧命名，具体图标类名（如icon-shouye）得看你在 iconfont 项目里给图标起的名字，鼠标悬停图标就能看到 DOM 上的真实 class
小程序端要不要转 base64？
微信/支付宝小程序对字体加载更敏感：不支持跨域 URL，也不认相对路径，甚至部分安卓 App 端对 .woff2 兼容差。base64 内联能绕过路径问题，但会增大 CSS 体积。
实操建议：
- 用在线工具或命令行将
iconfont.woff转成 base64 字符串（注意 MIME 类型是font/woff） - 替换
iconfont.css中的url(...)为url('data:font/woff;charset=utf-8;base64,...') - 如果项目已用 vite 构建，确认
static下的字体文件是否真被复制到了dist对应目录，否则本地路径也会 404
最容易被忽略的是：改完 font-family 名字后没清缓存，或者改了 CSS 却忘了重启 HBuilderX / 重新运行 npm run dev:mp-weixin —— 图标不显示时，先检查控制台「网络」标签页里字体文件是否 200 加载成功，再看「计算样式」里 font-family 是否真的生效。
