Gotham Book字体在Safari浏览器与iPhone设备中失效求助

我帮你梳理几个大概率能解决问题的方向，都是实际开发中踩过坑总结出来的：

1. 调整字体命名与格式兼容性 #

Safari对字体文件名和font-family的命名规则特别严格，尤其是空格和特殊字符。你当前用的'Gotham Book'带空格，建议改成无空格的命名（比如'GothamBook'），同时确保字体文件本身的命名也尽量简洁（如果不想改文件名，至少在font-family里统一用无空格的名称）。

另外，很多转换工具生成的woff2文件在Safari上会有兼容性问题，建议用靠谱的工具重新转换一次woff2格式的文件，确保是Safari支持的标准格式。

2. 优化@font-face代码结构 #

把src属性拆分成两行，第一行单独放eot文件，第二行用逗号分隔其他格式，同时新增font-display: swap属性，帮助Safari更好地处理字体加载优先级：

@font-face {
  font-family: 'GothamBook';
  src: url('assets/fonts/Gotham-Book.eot');
  src: url('assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
       url('assets/fonts/Gotham-Book.woff2') format('woff2'),
       url('assets/fonts/Gotham-Book.woff') format('woff'),
       url('assets/fonts/Gotham-Book.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 让浏览器先显示 fallback 字体，避免空白 */
}

3. 检查服务器MIME类型设置 #

Safari会严格校验字体文件的MIME类型，若服务器未正确配置，会直接拒绝加载字体。需要给不同字体格式设置对应的MIME类型：

• Nginx：在配置文件中添加

location ~* \.(eot|woff|woff2|ttf)$ {
    if ($request_filename ~* \.woff2$) {
        add_header Content-Type font/woff2;
    }
    if ($request_filename ~* \.woff$) {
        add_header Content-Type application/font-woff;
    }
    if ($request_filename ~* \.ttf$) {
        add_header Content-Type font/ttf;
    }
}

• Apache：在.htaccess文件中添加

AddType font/woff2 .woff2
AddType application/font-woff .woff
AddType font/ttf .ttf

4. 验证字体文件完整性 #

直接在Safari地址栏输入字体文件的URL（比如https://你的域名/assets/fonts/Gotham-Book.woff2），如果Safari能正常预览字体内容，说明文件没问题；如果无法预览，就需要重新获取或转换字体文件，排除文件损坏的可能。

5. 排查CSS优先级问题 #

确保应用字体的CSS选择器优先级足够高，没有被其他样式覆盖。可以临时用!important测试：

body {
  font-family: 'GothamBook', sans-serif !important;
}

如果这样能生效，说明是优先级的问题，再调整选择器的权重即可。

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