配置@font-face规则后本地字体无法加载，请求排查代码错误

首先看你提供的代码，存在明显语法错误： #

你的h1样式规则没有闭合，缺少结尾的}，这会导致浏览器无法正确解析整个CSS代码，直接影响字体规则的应用。修正后的代码：

@font-face {
    font-family: 'fontName';
    src: url('font.ttf');
}

header {
    text-align: center;
}

h1 {
    font-family: 'fontName';
} /* 补上缺失的大括号 */

除此之外，还有这些常见问题需要排查： #

• 路径验证：确认font.ttf确实和你的CSS文件（或HTML文件，如果是内联CSS）在同一目录。如果CSS放在子文件夹里，路径要改成../font.ttf这类相对路径。
• 多格式兼容：仅提供TTF格式可能在部分浏览器（比如旧版IE）无法识别，建议补充更通用的woff/woff2格式，提升兼容性：

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

• 服务器MIME类型配置：部分服务器默认没有设置字体文件的MIME类型，会导致浏览器拒绝加载。比如Apache需要在.htaccess里添加：

  AddType font/ttf .ttf
  AddType font/woff .woff
  AddType font/woff2 .woff2
  

  Nginx则在配置文件的types块中添加对应规则。
• 缓存问题：浏览器可能缓存了之前失败的请求，尝试清空浏览器缓存，或者给字体URL加版本号强制刷新：url('font.ttf?v=1.1')。
• 字体文件完整性：确认字体文件没有损坏，重新下载原文件替换试试。
• 添加备用字体：在font-family里加上系统默认字体，比如font-family: 'fontName', Arial, sans-serif;，这样能快速判断是字体没加载，还是样式根本没生效。

内容的提问来源于stack exchange，提问作者aaronpa