外部字体CSS不能在uni-app的中使用，必须放在App.vue的全局块中，路径用绝对路径，声明font-weight和font-style，并为小程序改用SVG或条件编译。
外部字体CSS（如 iconfont.css、自定义 @font-face 文件）在 uni-app 中不能直接 @import 到 里，也不能靠 import 语句塞进 JS——否则 H5 可能显示，小程序和 App 端大概率失效或渲染为空白方块。
为什么 @import 到组件里字体不生效？
根本原因是作用域隔离 + 平台限制双重干扰：
-
下的@import不会触发 Vue 的样式作用域处理，但导入的字体声明（@font-face）又必须全局注册才能被后续元素使用；而 scoped 块内定义的font-family选择器本身带了[data-v-xxx]属性，无法匹配全局字体族名 - 微信/支付宝等小程序平台根本不支持运行时动态加载或解析
@font-face中的本地路径（如url('/static/fonts/iconfont.woff')），只认 base64 内联或合法 HTTPS 外链（且需配置域名白名单） - HBuilderX 的预编译对
@font-face中的路径不做重写，~@/别名在非 JS 环境下无效，写错路径就静默失败
App.vue 中引入字体 CSS 的正确姿势
必须把字体定义放在全局无作用域的 块中，且路径要适配各端：
- 字体文件统一放
static/fonts/目录（不走 webpack 编译，避免路径被篡改） -
@font-face的src必须用绝对路径url('/static/fonts/iconfont.woff')，不能用~@/或相对路径 - 每个
format()后必须加分号，例如format('woff2');，漏掉会导致整条规则被忽略 - 务必显式声明
font-weight: normal;和font-style: normal;，否则某些平台（尤其是 iOS App）会拒绝加载
示例（写在 App.vue 的 块中）：
@font-face {
font-family: 'iconfont';
src: url('/static/fonts/iconfont.woff2') format('woff2'),
url('/static/fonts/iconfont.woff') format('woff'),
url('/static/fonts/iconfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
小程序端必须绕开 @font-face？
是的。微信、支付宝、抖音等小程序平台对 @font-face 支持极弱，即使路径全对、HTTPS 域名已备案，图标仍常显示为方块。这不是配置问题，是平台原生限制。
- 真机调试时看到方块 → 优先放弃字体图标方案，改用 SVG 组件或雪碧图
- 若必须用 iconfont，H5 端可保留 base64 内联（
url('data:font/woff2;base64,...')），但小程序端需用条件编译隔离：/* #ifdef H5 */ ... /* #endif */ - 别在
pages.json或组件里写条件编译注释——它们不识别/* #ifdef */，只认顶格、无缩进、无空格的块注释
CDN 字体 CSS 怎么安全加载？
不能写在 标签里用 @import url(...)，uni-app 构建时会跳过外链解析，小程序直接忽略。
- 必须用 JS 动态注入：
document.head.appendChild() - 注入时机选在
mounted或onLaunch（App.vue），避免样式闪动 - H5 和 App 端可加载，但小程序端仍受限：微信要求 CDN 域名必须在后台「业务域名」中备案，且仅支持 HTTPS
- 动态注入的 CSS 无法参与条件编译，也无法被 HBuilderX 实时预览，调试只能靠真机日志或
console.log(getComputedStyle(el).fontFamily)验证是否注册成功
最易被忽略的一点：字体文件本身格式兼容性。.ttf 在 iOS App 上表现尚可，但微信小程序只认 .woff2（且需 MIME 类型为 font/woff2），而部分老旧安卓 WebView 对 .woff2 解析失败——实际项目中，建议同时提供 .woff2 + .ttf 两套，并在 @font-face 中按顺序声明，让各端自行 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
