当前位置：首页 > 文章列表 > 文章 > 前端 > 字体加载失败怎么解决？检查font-face路径与格式

字体加载失败怎么解决？检查font-face路径与格式

2026-02-10 11:39:31 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《字体加载失败怎么解决？检查font-face路径与格式》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

字体加载失败主因是路径错误、格式不支持或MIME类型配置不当；需查404/CORS错误、验证相对路径、提供woff2/woff/ttf多格式回退，并确保服务器返回正确Content-Type及CORS头。

字体文件加载失败怎么办_检查font face路径与格式

字体文件加载失败，通常是因为 @font-face 中声明的路径不对、格式不被支持，或服务器未正确配置 MIME 类型。先确认浏览器控制台是否报 404（路径错误）或 CORS（跨域）错误，再逐项排查。

检查 font-face 的 src 路径是否正确

路径是相对 CSS 文件位置计算的，不是 HTML 页面位置。比如 CSS 在 /css/style.css，字体在 /fonts/inter.woff2，那么 src 应写：

@font-face {
src: url("../fonts/inter.woff2");
}

用浏览器开发者工具的 Network 标签页查看字体请求是否返回 404；
右键复制字体链接，在新标签页打开，确认能否直接下载；
避免使用绝对路径如 /fonts/xxx.woff2，除非确定站点根目录部署结构一致。

确认字体格式是否被浏览器支持

不同浏览器支持的字体格式有差异。单靠一种格式（如只用 .ttf）容易失败。推荐按优先级提供多格式回退：

@font-face {
  font-family: "MyFont";
  src: url("font.woff2") format("woff2"),
     url("font.woff") format("woff"),
     url("font.ttf") format("truetype");
}

现代项目优先用 woff2（压缩率高、兼容性好，Chrome/Firefox/Safari/Edge 均支持）；
IE11 只支持 eot 和 woff，如需兼容可补充；
避免使用已淘汰格式如 svg 字体（仅旧版 iOS Safari 支持）。

检查服务器是否返回正确的 Content-Type

字体文件需由服务器以对应 MIME 类型响应，否则部分浏览器（尤其 Chrome）会拒绝加载：

.woff2 → font/woff2
.woff → font/woff
.ttf → font/ttf 或 application/font-sfnt
本地开发用 VS Code Live Server 默认支持；Node.js/Express 需手动设置；Nginx/Apache 需配置 mime.types 或 AddType 指令。