如何解决Safari浏览器无法识别某些Web字体（Webfont）？

Safari无法加载自托管Web字体的主因是@font-face声明不合规、MIME类型错误、本地同名字体干扰或字体未被识别；需补全format()、拆分多格式声明、配对font-weight/font-style、验证Content-Type为font/woff2、停用冲突本地字体并注入用户样式表。

当你在Safari中打开一个依赖自托管Web字体（如Inter、Noto Sans SC或定制图标字体）的网页时，标题文字变成Times New Roman、中文段落堆叠错位、图标显示为方块——这不是网页代码写错了，而是Safari在加载阶段就拒绝解析该字体文件，直接跳过整条@font-face规则，回退到系统默认字体链。

确认是否真为Web字体未被识别

按 Command + Option + I 打开开发者工具 → 切换到“网络”标签页 → 在筛选框输入 .woff2 或 .woff → 刷新页面。

若字体请求根本没出现在列表里，说明CSS中@font-face未被解析；若出现但状态码是0（blocked）、403或响应体为空，说明资源被拦截或服务器拒绝；若状态为200但右侧“字体”子标签下“已加载字体”为空，则Safari已接收文件却未注入字体表——这正是“无法识别”的典型表现。

补全@font-face声明中的format()与样式配对

方法一：强制补全format()描述符

在Elements面板中Command + F搜索@font-face，定位到问题字体规则。如果src只写了url('font.woff2');而没带format('woff2')，【iOS/iPadOS Safari 15+及macOS Safari 16+会静默丢弃整条规则】。必须改为：src: url('font.woff2') format('woff2');。

方法二：拆分多格式声明，禁止混写

不要写成src: url('font.woff2') format('woff2'), url('font.woff') format('woff');。Safari会因解析失败直接跳过。应拆为两条独立@font-face，每条只含一种格式和对应format值。

方法三：font-weight与font-style必须成对声明

例如你引入的是Regular字重的字体，@font-face里写了font-weight: 400;却漏掉font-style: normal;，那么后续用font: 400 16px "MyFont";时，Safari因匹配不全而放弃加载——【漏写font-style会导致font简写声明完全失效】。

验证服务器返回的MIME类型是否正确

在Network中点击该woff2请求 → 右侧Headers → 查看Response Headers里的Content-Type字段。

若显示text/plain、application/octet-stream或为空，说明服务器未以font/woff2类型返回字体文件。Safari会拒绝将其注册为可用字体，哪怕文件本身完好无损。

Apache需在.htaccess中添加：AddType font/woff2 .woff2；Nginx需在mime.types中确认包含types { font/woff2 woff2; }，并重启服务。

排除本地同名字体干扰

第一步：打开“字体册”App（聚焦搜索即可）。

第二步：搜索网页中使用的字体名，例如“Inter”、“Noto Sans”、“Material Icons”。

第三步：若发现已启用（✔️）的同名字体条目，右键→“停用”，不要删除。

这一步操作起来很简单，直接重启Safari就行。

注入用户样式表强制接管字体链

① 创建文本文件，命名为safari-webfont-fix.css，内容为：

* { font-family: "PingFang SC", "Heiti SC", sans-serif !important; }

② 保存至 ~/Library/Safari/StyleSheets/（目录不存在请手动创建）

③ Safari → 偏好设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”

④ 重启Safari → 顶部菜单“开发”→“用户样式表”→ 选中该CSS文件