@font-face需放在bootstrap.css之后且位于自定义CSS最顶部，确保字体名规范、提供woff2/woff/ttf多格式、用伪元素+!important调用，并通过Computed面板验证生效。
为什么@font-face声明放在bootstrap.css前面会失效
Bootstrap 的 CSS 重置规则（比如 .btn、.form-control、body）会强制设置 font-family、font-weight 和 line-height，且其选择器权重高、位置靠后。如果你的 @font-face 声明写在 bootstrap.min.css 引入之前，或在自定义 CSS 文件顶部但没压过 Bootstrap 的字体继承链，浏览器解析时根本“看不到”你的字体定义——更别说渲染图标了。
实操建议：
- 把
@font-face块放在所有外部 CSS（含bootstrap.min.css）引入之后，且是你自己主样式文件（如app.css）的最顶部 - 确保
font-family名称不带空格、全小写+中划线，例如'my-icon'，避免和 Bootstrap 内置字体名（如'Helvetica Neue'）冲突 - 不要依赖
font-weight: normal或font-style: normal—— 图标字体通常不区分粗细/斜体，留空或显式设为400/normal即可，但必须写全
必须提供的字体格式与路径写法
只放 .woff2 看似省事，但在 Android 4.4 WebView、IE11 或某些企业内网环境里会被直接跳过，图标变方块。路径写错更常见：CSS 中的 url() 是相对于该 CSS 文件的位置，不是 HTML 页面。
实操建议：
- 按降序提供至少三种格式：
.woff2→.woff→.ttf；.eot和.svg已基本可弃用 - 路径示例：若 CSS 在
css/app.css，字体文件在fonts/my-icon.woff2，则写url('../fonts/my-icon.woff2') - 每个
url()后必须跟format('xxx')，例如format('woff2')，否则部分浏览器无法识别
如何安全调用图标字体（避免被 Bootstrap 覆盖）
即使 @font-face 加载成功，Bootstrap 对按钮、输入框等组件的 font-family 强制重置仍会让图标文字回退成系统字体。伪元素（如 ::before）+ !important 是目前最稳妥的调用方式。
实操建议：
- 不要直接给
<i class="icon-home"></i>设font-family，而应通过伪元素注入字符并锁定字体 - 务必加
!important，例如font-family: 'my-icon' !important; - 显式设置
font-display: swap，防止加载期间空白或布局抖动 - 示例规则：
@font-face { font-family: 'my-icon'; src: url('../fonts/my-icon.woff2') format('woff2'), url('../fonts/my-icon.woff') format('woff'), url('../fonts/my-icon.ttf') format('truetype'); font-display: swap; } .icon-home::before { font-family: 'my-icon' !important; content: '\e900'; }
检查是否生效的三个关键点
很多问题其实不是代码写错，而是没验证对地方。打开 DevTools 后别只看 Elements 面板的样式栏，要切到 Computed 面板查最终计算值。
实操建议：
- 选中图标元素 → 右侧 Computed 标签页 → 搜索
font-family→ 确认显示的是你定义的'my-icon'，而不是sans-serif或 Bootstrap 的默认栈 - 检查 Network 面板，确认
.woff2等字体文件返回状态码是200，而非404或403 - 在 Elements 面板中临时删掉 Bootstrap 的 CSS link 标签，如果图标立刻显示，说明就是优先级/覆盖问题，不是字体本身问题
真正卡住的地方往往不是语法，而是字体声明位置、路径相对性、以及没意识到 Bootstrap 的 font-family 重置有多“霸道”。只要把 @font-face 放对位置、路径写对、调用加 !important，再对着 Computed 面板逐项核验，基本没有绕不过去的坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
