17370845950

字体加载失败主因是路径错误、协议限制、声明不全或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:// 下死活不加载，是新手最常反复折腾却想不到原因的地方。