CSS文件移出项目根目录后@font-face失效问题排查

以下是针对该问题的核心排查方向和解决方案：

1. 先确认字体文件的实际请求状态 #

打开浏览器开发者工具（F12）切换到网络面板，刷新页面后查看字体文件的请求记录：

• 如果显示404：说明路径仍存在错误，重新核对CSS文件到字体文件的相对路径（注意：相对路径是基于CSS文件所在位置，而非HTML文件）；
• 如果显示200但字体不渲染：重点检查MIME类型、跨域或字体格式兼容性问题。

2. 核对@font-face语法细节 #

• 字体名完全匹配：确保@font-face中定义的font-family名称，和页面CSS中引用的名称完全一致（部分系统对大小写敏感）；
• 完整的格式声明：不同浏览器支持的字体格式不同，建议同时声明主流格式以兼容更多环境，示例：

  @font-face {
    font-family: 'MyCustomFont';
    src: url('../assets/fonts/MyCustomFont.woff2') format('woff2'),
         url('../assets/fonts/MyCustomFont.woff') format('woff'),
         url('../assets/fonts/MyCustomFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

3. 排查跨域与协议限制 #

• 若用file://协议直接打开HTML文件（双击本地文件），浏览器可能因同源策略拦截字体加载，建议用本地服务器（如VS Code的Live Server插件、http-server命令）以http://协议运行项目；
• 若CSS和字体文件分属不同域名/子域名，需在字体文件所在服务器配置CORS响应头（如Access-Control-Allow-Origin: *）。

4. 检查文件权限与服务器配置 #

• 本地环境：确认字体文件及所在文件夹未被系统锁定、权限设置为可读；
• 服务器环境：检查服务器是否配置了正确的字体MIME类型（woff2对应font/woff2，woff对应font/woff，ttf对应font/ttf），同时确保字体文件权限允许服务器读取（避免403错误）。

5. 清除缓存干扰 #

浏览器可能缓存了旧的CSS或字体资源，即便修改路径也会加载无效内容：

• 在开发者工具中勾选禁用缓存后刷新页面；
• 给字体文件路径添加版本号（如url('../fonts/font.ttf?v=2')）强制浏览器加载新资源。

内容的提问来源于stack exchange，提问作者xinyun