自定义Web字体特殊字符在WebKit(iOS/Safari)失效，Chrome正常，如何解决？

核心问题分析 #

你使用的hershey-noailles-herbier字体由特殊字符构成，Chrome显示正常但Safari/iOS下被替换为数字，大概率是服务器MIME类型配置错误或字体格式兼容性不足导致，结合AWS S3托管环境，可按以下步骤解决：

1. 修正AWS S3字体文件的MIME类型 #

S3默认不会自动识别部分Web字体的正确MIME类型，这是Safari无法加载字体的常见原因：

• 登录AWS S3控制台，找到存储字体的存储桶
• 选中对应的字体文件（.woff2、.woff、.svg等），点击「编辑元数据」
• 设置正确的Content-Type：
  • .woff2：font/woff2
  • .woff：font/woff
  • .svg：image/svg+xml（如果使用了SVG格式字体）
• 保存修改后，清除浏览器缓存测试

2. 完善@font-face规则的兼容性 #

Safari对Web字体的格式支持有特定要求，补充兼容格式并规范规则：

@font-face {
    font-family: 'hershey-noailles-herbier';
    src: url('hershey-noailles-herbier-webfont.woff2') format('woff2'),
         url('hershey-noailles-herbier-webfont.woff') format('woff'),
         url('hershey-noailles-herbier-webfont.ttf') format('truetype'),
         url('hershey-noailles-herbier-webfont.svg#hershey-noailles-herbier') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

• 确保所有引用的字体文件都存在且路径正确
• SVG格式需指定字体文件内部定义的ID（通常与字体名称一致）

3. 验证字体字符映射 #

由于字体由特殊字符构成，需确认字符编码匹配：

• 检查字体文件的Unicode映射范围，在@font-face中添加unicode-range属性，限定字体生效的字符范围：

@font-face {
    /* 其他属性不变 */
    unicode-range: U+0020-U+007E; /* 替换为你的字体实际覆盖的Unicode范围 */
}

4. 清除缓存（关键步骤） #

• 若使用CloudFront等CDN，需清空CDN缓存，避免旧配置生效
• 在Safari中清除浏览器缓存，或使用隐私浏览窗口测试结果

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