字体加载失败主因是路径错误、协议限制、声明不全或CSS优先级问题；需用绝对路径或正确相对路径，禁用file://协议，补全@font-face属性并确保声明顺序，再通过浏览器验证。
字体文件路径不对导致 @font-face 加载失败
浏览器控制台报 Failed to load resource: net::ERR_ABORTED 或 Font from origin has been blocked from loading，八成是路径写错了。相对路径要以 HTML 文件所在位置为基准，不是 CSS 文件位置——这点很多人搞反。
- HTML 在
/project/index.html，CSS 在/project/css/style.css，而字体放在/project/fonts/MyFont.woff2，那么 CSS 里必须写url('../fonts/MyFont.woff2')，不是url('fonts/MyFont.woff2') - 用绝对路径更稳：以站点根目录开头，比如
url('/fonts/MyFont.woff2')，前提是服务器能访问到该路径 - 直接在浏览器地址栏敲字体 URL（如
http://localhost:8080/fonts/MyFont.woff2）看能否下载，这是最快验证方式
CSS 中 @font-face 声明不完整或格式兼容性差
只声明 .woff2 格式，老版 Safari 或 IE 会直接忽略；漏掉 font-weight 和 font-style 会导致后续 font 简写匹配失败。
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2'),
url('/fonts/MyFont.woff') format('woff'),
url('/fonts/MyFont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}-
font-display: swap是关键，避免文字长时间空白；不用它的话，某些字体加载慢时会显示默认字体，等加载完才闪动切换 - 确保
font-weight和你实际用的 CSS 中一致，比如用了font-weight: 600却只声明了400，浏览器找不到匹配字重就会回退 - 不要省略
format()，否则部分浏览器无法识别字体类型
本地双击打开 HTML 文件时字体不生效
Chrome、Edge 等现代浏览器出于安全限制，用 file:// 协议加载时禁止跨源字体请求，即使字体和 HTML 在同一文件夹下也会被拦——这不是 bug，是策略。
- 必须通过本地服务器访问：用
python3 -m http.server 8000（Python）或npx serve（Node），然后打开http://localhost:8000/index.html - 开发阶段别双击 HTML，这个习惯得改掉；上线后部署在 HTTP/HTTPS 服务上自然不受限
- 如果真要离线运行且必须用自定义字体，可将字体转为 base64 内联进 CSS（仅限小字体，大字体会让 CSS 膨胀严重）：
@font-face {
font-family: 'MyFont';
src: url('data:font/woff2;base64,d09GMgABAAAAA...') format('woff2');
font-weight: 400;
font-style: normal;
}字体加载成功但页面没应用，检查 CSS 优先级和继承
控制台 Elements 面板里看到元素计算出的 font-family 是系统默认值，说明你的规则没生效，常见于选择器权重不足或被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 确认
@font-face声明在所有使用该字体的 CSS 规则之前（顺序很重要） - 检查是否被更高优先级的选择器覆盖，比如
body * { font-family: sans-serif; }会干掉子元素的自定义字体 - 用浏览器开发者工具的 Computed 标签页，点开
font-family，看哪条规则被划掉、哪条生效，源头一目了然 - 避免在
font简写中漏掉必要值：比如font: 16px 'MyFont';缺少字重和行高，浏览器可能解析异常；稳妥写法是font-family: 'MyFont'; font-size: 16px;
字体加载问题多数不是“技术不行”，而是路径、协议、声明顺序、调试方法这四点卡住了。尤其 file:// 下死活不加载，是新手最常反复折腾却想不到原因的地方。
