使用@font-face时一款自定义字体正常另一款失效的求助

问题背景 #

• 字体文件与PHP文档存放在同一目录
• 先下载TTF格式字体，再转换生成WOFF、WOFF2格式
• Parisienne字体可正常显示，BreitkopfFraktur字体无法加载
• 字体调用方式：
  • Parisienne：your textM`
  • BreitkopfFraktur：your textU`

当前使用的CSS代码 #

@font-face {
  font-family: 'BreitkopfFraktur';
  src: url('BreitkopfFraktur.woff') format('woff');
       url('BreitkopfFraktur.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Parisienne';
    src: url('parisienne-regular.woff') format('woff');
     url('parisienne-regular.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;
}

已核实的字体文件信息 #

• 原字体官方名称：Breitkopf Fraktur、Breitkopf Fraktur Regular
• 下载压缩包名：breitkopf-fraktur.zip
• 解压后TTF文件名：BreitkopfFraktur.ttf
• 转换后WOFF/WOFF2文件名：BreitkopfFraktur.woff、BreitkopfFraktur.woff2

排查方向与解决办法 #

1. 修复CSS语法错误
   你的@font-face中src属性的多资源之间缺少逗号分隔，这会导致浏览器忽略后续资源甚至失效。正确写法：

   @font-face {
     font-family: 'BreitkopfFraktur';
     src: url('BreitkopfFraktur.woff2') format('woff2'),
          url('BreitkopfFraktur.woff') format('woff');
     font-weight: normal;
     font-style: normal;
   }
   

   建议优先加载体积更小的WOFF2，再用WOFF做兼容降级，资源间必须用逗号分隔。

2. 验证字体文件完整性

   • 直接在本地打开转换后的WOFF/WOFF2文件，确认字体可正常显示，排除转换过程中文件损坏的可能。
   • 检查服务器端文件权限，确保字体文件有可读权限（比如Linux系统设置为644），避免浏览器因权限问题无法加载。

3. 核对字体内部族名
   部分字体的内部族名和文件名不一致，可能导致匹配失败。用字体编辑工具查看TTF文件的内部族名，确保CSS中font-family的值和内部名称完全一致（比如内部名称是Breitkopf Fraktur，就把font-family写成'Breitkopf Fraktur'）。

4. 查看浏览器控制台报错
   打开浏览器开发者工具（F12）的「网络」面板，筛选「字体」类型，查看BreitkopfFraktur字体的加载状态：

   • 若显示404错误：确认文件名拼写完全一致（注意Linux服务器区分大小写）
   • 若显示加载失败：检查服务器是否配置了正确的MIME类型（WOFF对应application/font-woff，WOFF2对应font/woff2）

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