HTML字体加载失败原因及解决办法

• 检查 @font-face 中的 src 路径是否准确，建议使用开发者工具的“Network”标签查看请求是否404。
• 优先使用相对路径（如 ./fonts/myfont.woff）并确保目录结构一致。
• 也可使用绝对路径或完整URL，避免路径解析错误。

• 确认字体服务器返回的HTTP响应头包含：Access-Control-Allow-Origin: * 或允许你的域名。
• 若使用自建服务器，需在Web服务器（如Nginx、Apache）中添加字体文件类型的CORS配置。
• 例如，在Nginx中添加：

          location ~* \.(woff|woff2|ttf|eot)$ {
            add_header Access-Control-Allow-Origin "*";
          }
        

• 推荐在 @font-face 中提供多种格式，提高兼容性：

          @font-face {
            font-family: 'MyFont';
            src: url('myfont.eot'); /* IE9 */
            src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('myfont.woff2') format('woff2'),
                 url('myfont.woff') format('woff'),
                 url('myfont.ttf') format('truetype');
          }
        

• 现代项目建议至少包含 woff2 和 woff 格式，兼顾性能与兼容。

• 在中国大陆访问Google Fonts常受阻，建议将字体文件下载后本地部署。
• 使用国内CDN镜像或自建静态资源服务器提升稳定性。
• 设置字体加载超时后备方案，例如通过 font-display: swap 避免页面长时间空白：

      @font-face {
        font-family: 'MyFont';
        src: url('myfont.woff2') format('woff2');
        font-display: swap;
      }