最常卡住的是 font-family 名字被自动转小写导致匹配失败；需将 iconfont.css 中所有 font-family 值改为纯小写、无空格，字体文件放 static/fonts/ 并用绝对路径引用， 标签显式声明 font-family 才能生效，小程序须用 base64 内联字体。
uni-app 引入 iconfont 字体图标，最常卡住的地方不是路径写错，而是 font-family 名字被自动转小写后和 CSS 里声明的不一致——图标加载成功、控制台无报错、但只显示方块或空白。
iconfont.css 中的 font-family 必须全小写
uni-app 编译器（尤其是 HBuilderX 或 vue-cli 构建时）会把 @font-face 里的 font-family 值强制转成小写。而 iconfont 官网生成的 CSS 默认用 font-family: "iconfont"（看着是小写，但可能含不可见空格或大小写混用），一旦你下载的包里实际是 "IconFont" 或 "myIcon"，就匹配失败。
- 打开下载的
iconfont.css，全局搜索font-family:，把所有引号内的值手动改成纯小写，比如"IconFont"→"iconfont" - 确保引号内没有首尾空格，可用编辑器“显示空白字符”功能验证
- 改完后别用线上地址引入，直接在
App.vue的<style></style>里用@import "@/static/iconfont/iconfont.css";
字体文件路径必须用绝对路径 /static/
uni-app 各端对相对路径解析不一致：H5 能认 url('./iconfont.woff')，但微信小程序会忽略它，导致字体不加载；App 端则可能因构建路径变化而 404。
- 把
iconfont.woff、.ttf等文件统一放进static/fonts/目录（不要放assets/，那里会被 webpack 处理） - 修改
iconfont.css中所有url(...)，替换成url('/static/fonts/iconfont.woff') - 如果用了多个字体格式（woff2/ttf），全部按同样方式改路径，不要遗漏
format('woff2')后面的分号
必须显式声明 font-family 才能生效
uni-app 的 <view></view> 和 <text></text> 组件默认不继承父级 font-family，只靠 class="iconfont icon-home" 不够，content 属性没载体。
- 推荐用
<text></text>标签包裹图标：<text class="iconfont icon-home"></text> - 并在样式中为
.iconfont加上font-family: 'iconfont' !important; - 如果非要用
<view></view>，必须内联写style="font-family: 'iconfont'"，class 里声明无效 - 检查浏览器开发者工具的“计算样式”，确认当前元素最终生效的
font-family确实是iconfont
微信/支付宝小程序需用 base64 内联字体
小程序平台禁止从 CSS 加载本地字体文件（哪怕路径绝对），也不支持跨域远程字体。用 url('/static/fonts/...') 在小程序里必然白屏。
- 用命令行或在线工具将
iconfont.woff转成 base64 字符串（例如base64 -i iconfont.woff | tr -d '\n'） - 替换
iconfont.css中的src: url(...)行为src: url('data:font/woff;charset=utf-8;base64,xxxxxx') format('woff'); - 保留所有字体格式的 base64 版本（woff2/ttf），提高兼容性；但注意 CSS 体积会增大，影响首次加载
- H5 和 App 端仍可用文件路径方式，所以建议为不同平台条件编译：用
#ifdef MP-WEIXIN包裹 base64 版本
最容易被忽略的是：图标类名（如 icon-home）本身不带字体信息，它只定义了 content: "\e601"；真正起作用的是 font-family + content 二者同时存在且匹配。少一个，就是方块。
