如何修复Safari浏览器更新后无法显示网页中的自定图标字体

Safari更新后图标字体失效主因是@font-face策略收紧、CORS头缺失、本地字体冲突或扩展干扰；需检查网络请求状态码与MIME类型、补全format()与font-style声明、禁用同名本地字体、测试无痕模式、清除缓存文件WebpageIcons.db及Caches目录。

更新后的Safari浏览器突然无法显示网页中的自定义图标字体（如Font Awesome、Ionicons、自建icon font），通常不是字体文件本身损坏，而是新版Safari对@font-face加载策略、CORS响应头或本地字体冲突的校验更严格所致。

确认图标字体是否被成功加载

打开问题网页→按 Command + Option + I 调出开发者工具→切换到“网络”标签页→在筛选器中选择“Fonts”→刷新页面。

观察列表中图标字体文件（如 icons.woff2、fontawesome-webfont.woff2）的状态码：若为 403、404、Failed 或空白，说明请求根本未发出或被拦截；若为 200 但预览为空白或报错，则字体文件可能已损坏或格式不被 Safari 支持。

点击该字体请求→查看右侧“响应”面板：若内容不可读或提示“Failed to load response data”，说明服务器未正确返回二进制字体流，【必须确保 .woff2 文件以 font/woff2 MIME 类型返回】。

检查并修正 @font-face 声明

方法一：补全 format() 描述符并分离多格式声明

在开发者工具的“元素”面板中 Command + F 搜索 @font-face，定位到图标字体的 CSS 规则。若只写 src: url('icons.woff2'); 而未写 format('woff2')，iOS/iPadOS Safari 15+ 及 macOS Safari 16+ 会静默跳过该字体；若同时提供 woff2 和 ttf，必须为每种格式单独声明，并明确对应 format 值。

方法二：验证 font-weight 与 font-style 是否成对存在

例如你引入的是图标字体的 Regular 字重，但 @font-face 中只写了 font-weight: 400，却漏掉 font-style: normal，那么后续使用 font: 400 16px "IconFont" 时，Safari 因匹配失败直接回退到系统字体——【漏写 font-style 会导致 font 简写声明完全失效】。

排除本地同名字体干扰

第一步：打开“字体册”App（可在聚焦搜索中输入“字体册”快速启动）。

第二步：在左上角搜索栏输入图标字体名称，例如 “FontAwesome”、“Ionicons”、“Material Icons”。

第三步：若出现已启用（✔️）的本地字体条目，右键点击→选择“停用”，不要删除，仅临时禁用即可。

第四步：关闭字体册，重启 Safari 并刷新网页。这一步操作起来很简单，直接重启浏览器就行。

绕过扩展与隐私限制干扰

方法1：启用无痕浏览模式测试

按下 Shift + Command + N 打开无痕窗口→访问同一网页→观察图标是否正常显示。若显示正常，说明常规模式下的广告拦截器（如 uBlock Origin）、脚本管理器或内容拦截扩展正在误判字体资源为追踪行为而拦截。

方法2：临时禁用全部扩展

进入 Safari → 设置 → 扩展→取消勾选所有已启用项→退出 Safari→重新启动→测试网页。特别注意名称含 “AdGuard”、“Dark Reader”、“Font Changer” 的扩展，它们最常劫持 @font-face 加载流程。

强制清除 Safari 图标字体缓存

① 关闭 Safari 浏览器（右键 Dock 图标 → 退出，确保进程终止）。

② 打开访达，按 Command + Shift + G，粘贴路径：~/Library/Caches/com.apple.Safari/，回车后删除该文件夹内全部内容。

③ 再次按 Command + Shift + G，粘贴路径：~/Library/Safari/WebpageIcons.db，将此文件直接拖入废纸篓（该文件存储 favicon 及部分 icon font 元数据，新版 Safari 更新后易损坏）。

④ 重新启动 Safari，访问网页，图标字体将重新发起请求并建立新缓存。