如何解决Safari浏览器无法正确显示字体图标Icon Font的问题

字体图标在Safari中不显示的主因是字体文件加载失败、CORS配置缺失、font-display策略不当或本地同名字体干扰，需检查Network中字体状态码、服务器Access-Control-Allow-Origin响应头、font-display值及系统字体册冲突。

字体图标（Icon Font）在 Safari 中不显示，通常不是字体本身的问题，而是 Safari 对 Web 字体加载、跨域策略或 CSS 渲染的限制更严格所致。重点排查字体文件加载状态、CORS 配置、font-display 行为和本地字体冲突。

检查字体文件是否成功加载

字体图标本质是 Web 字体，需确保 @font-face 指向的 .woff/.woff2 文件能被 Safari 正常请求并返回 200 状态。

• 打开开发者工具（Command + Option + I），切换到“网络”标签页，筛选“Fonts”类型，刷新页面，观察图标字体是否出现在列表中，且状态码为 200
• 若字体请求显示“Failed”或“Blocked”，说明路径错误、服务器未配置 MIME 类型（应为 font/woff2）、或响应头缺失 Access-Control-Allow-Origin
• 点击该字体请求，查看“预览”或“响应”内容：空白或报错说明字体文件损坏或格式不被 Safari 支持（如仅提供 .ttf 而未提供 .woff2）

确认 font-display 和字体加载策略

Safari 对 font-display: optional 或 font-display: swap 的行为较保守，尤其在首屏渲染时可能跳过加载缓慢的字体。

• 检查 CSS 中 @font-face 是否设置了 font-display: block 或 swap；建议优先使用 swap，避免图标长时间空白
• 避免在 @font-face 中混用多个 src 格式但缺少 fallback，例如只写 url('icon.woff') 而未提供 .woff2，Safari 可能因解析失败直接放弃加载
• 可临时在控制台执行 document.fonts.check("16px 'YourIconFontName'") 验证字体是否已就绪

排除本地字体干扰与系统设置

macOS 系统若安装了同名字体（如 FontAwesome、Ionicons 的桌面版），Safari 可能意外调用本地字体而非网页字体，导致图标乱码或不显示。

• 在“字体册”App 中搜索图标字体名称（如 “FontAwesome”），若有已启用的本地版本，请先停用或移除
• 检查 CSS 中 font-family 声明是否加了引号且拼写完全一致，例如 font-family: "Font Awesome 5 Free" 不可简写为 "FontAwesome"
• 尝试在开发者工具的“元素”面板中选中图标元素，右侧“计算样式”里确认 font-family 和 font-src 实际生效值

验证内容拦截器与隐私设置影响

部分广告/脚本拦截扩展（如 uBlock Origin、AdGuard）或 Safari 自带的“阻止跨站跟踪”会误判字体资源为追踪行为而拦截。

• 长按地址栏右侧的“重新载入”按钮，选择“关闭内容拦截器并重新载入”，观察图标是否恢复
• 进入 Safari 偏好设置 → “网站”标签页 → 左侧选“字体”或“自动播放”，右侧查看当前网站是否被设为“阻止”
• 临时禁用所有扩展（Safari → 偏好设置 → 扩展），逐一启用排查