17370845950

自定义字体不显示主要因路径错误、格式不兼容、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。

基本上就这些。只要路径正确、格式齐全、回退合理，自定义字体就能稳定显示。关键是别只依赖一种字体，永远给浏览器一条“后路”。