字体不显示主因是@font-face声明错误或字体路径、格式、权限问题；应检查路径准确性（推荐绝对路径）、多格式兼容性（woff2优先）、语法完整性、跨域及MIME类型配置。
字体不显示，大概率是 @font-face 声明写得不对，或者字体文件路径、格式、加载权限出了问题。关键不是“加了没”，而是“加得对不对”。
检查字体文件路径是否正确
相对路径容易出错，尤其项目结构嵌套深时。浏览器控制台（F12 → Network → Fonts）会明确标出 404 的字体请求。
- 推荐用绝对路径（以
/开头），比如src: url('/fonts/MyFont.woff2') - 确保字体文件真实存在于该路径下，注意大小写和扩展名（
.woff2≠.woff） - 如果用构建工具（如 Webpack/Vite），确认字体文件被正确复制到输出目录，或已配置 asset 处理规则
确认字体格式与浏览器兼容性
不同浏览器支持的字体格式不同，单写一种格式很容易在某些设备上失效。
- 优先提供
.woff2（现代浏览器首选，体积小、渲染优） - 降级补充
.woff（覆盖大部分旧版 Chrome/Firefox/Safari） - 必要时再加
.ttf或.eot（仅需兼容 IE9 及更老版本） - 顺序很重要：把兼容性最好、体积最优的格式放在最前面
验证 @font-face 声明语法和调用方式
声明本身要完整，调用时名称必须完全一致（区分大小写）。
立即学习“前端免费学习笔记（深入）”；
-
font-family是自定义名称，不是文件名：font-family: 'MyCustomFont'; -
src必须包含url()，且多个格式用逗号分隔：src: url('...woff2') format('woff2'), url('...woff') format('woff'); - 调用时只写
font-family中定义的名称，不要带后缀或路径：body { font-family: 'MyCustomFont', sans-serif; } - 可加
font-weight和font-style区分粗细/斜体变体，避免浏览器强行模拟
留意跨域与服务器 MIME 类型
字体文件若从其他域名加载（如 CDN），需服务端设置 Access-Control-Allow-Origin；本地开发时，部分服务器（如 Python SimpleHTTPServer）默认不返回正确的字体 MIME 类型，导致加载失败。
- 检查响应头中是否有
Content-Type: font/woff2（对应格式） - Vite/Webpack 等现代工具通常自动处理，但 Nginx/Apache 需手动配置 MIME 类型
- 开发阶段建议先用本地同源路径排除跨域干扰
