自定义字体不显示主要因路径错误、格式不兼容、CORS限制、语法错误或加载延迟；解决方法是正确使用@font-face引入多种格式字体，设置font-display:swap，配置合理回退堆栈并检查网络加载与MIME类型。
HTML插入字体不显示，通常不是代码写错了，而是字体加载机制、路径问题或浏览器兼容性导致的。要让自定义字体稳定显示，需要正确引入字体并设置合理的回退方案。
字体不显示的常见原因
自定义字体在页面中未生效，可能由以下几个关键因素造成：
- 字体文件路径错误：相对路径或绝对路径写错，浏览器无法加载字体文件。
- 字体格式不兼容：不同浏览器支持的字体格式不同，如WOFF、TTF、EOT等。
- CORS限制：跨域请求字体文件时，服务器未允许访问（尤其在使用CDN或外部域名时）。
- 字体声明语法错误：@font-face规则书写不规范，比如缺少font-family或src属性。
- 字体未真正加载完成：页面渲染时字体还在加载，出现短暂空白或回退到默认字体。
正确引入自定义字体的方法
使用@font-face是引入自定义字体的标准方式。为了提高兼容性，建议提供多种格式：
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font.eot'); /* IE9 */
src: url('fonts/custom-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/custom-font.woff2') format('woff2'),
url('fonts/custom-font.woff') format('woff'),
url('fonts/custom-font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
然后在CSS中使用：
立即学习“前端免费学习笔记（深入）”；
body {
font-family: 'CustomFont', Arial, sans-serif;
}
注意：优先列出你提供的字体，后面跟系统字体作为回退。
字体回退（Fallback）策略
即使引入了自定义字体，也要为加载失败或性能考虑设置多层回退：
- 第一层：自定义字体 —— 你希望用户看到的字体。
- 第二层：通用字体族 —— 如sans-serif、serif、monospace，确保可读性。
- 第三层：系统字体堆栈 —— 使用本地优先字体提升加载速度，例如：
font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
这样在移动端和桌面端都能快速匹配到清晰字体。
优化与调试建议
为了让字体更可靠地显示，可以采取以下措施：
- 使用font-display: swap控制字体加载行为，避免文字长时间不可见。
- 检查开发者工具的“Network”面板，确认字体文件是否404或被阻止。
- 将字体转为Base64内联（小图标字体适用），减少HTTP请求。
- 确保服务器配置了正确的MIME类型，如.woff对应application/font-woff。
基本上就这些。只要路径正确、格式齐全、回退合理，自定义字体就能稳定显示。关键是别只依赖一种字体，永远给浏览器一条“后路”。
