为什么Safari浏览器无法正常加载和渲染网页上的自定义字体？

Safari字体显示异常，通常逃不出这几个原因：@font-face声明不规范、MIME类型配置有误、浏览器扩展干扰，或系统字体本身出了冲突。具体来说，需要把format()补全、让font-weight和font-style成对出现、确认服务器返回的Content-Type是font/woff2，再排除扩展干扰、重置字体设置，必要时修复下系统字体库。

先抛个结论。你打开Safari，页面加载完了，可标题栏本该显示的「思源黑体」「Inter」或者品牌定制字体，全变成了苹方-简、Times New Roman，甚至干脆显示成方块乱码。这不是网页写错了，而是Safari对自定义字体（@font-face）的执行标准，比Chrome、Firefox严格得多。

检查@font-face声明是否完整合规

先看看方括号里的format()写没写对。打开网页源码，或者直接用开发者工具的“元素”面板，找到CSS里的@font-face规则。如果只写了src: url('font.woff2');，却漏了format('woff2')，那iOS/iPadOS Safari 15+会直接跳过这个字体，根本不加载。要是你同时提供了woff2和truetype两种格式，每种格式都得单独声明，并且把format值写清楚。

再来看看字重和字体风格的配对。举个例子，你引入了一个「Medium」字重的字体文件，但@font-face里只写了font-weight: 500，没写font-style: normal。后续用font: 500 16px "MyFont"这样的简写声明时，Safari因为匹配不上，就会直接回退到系统字体。漏掉font-style，整个font简写声明都会失效，这一点很多人容易忽略。

确认服务器返回的MIME类型正确

这个步骤稍微要点技术，但也不复杂。在Safari里打开有问题的页面，按Command + Option + I调出开发者工具，切换到“网络”标签页，刷新一下，然后在筛选栏里勾选“Fonts”。找到对应的woff2字体文件，点开它，在右边的Headers里看Response Headers中的Content-Type字段。

如果显示的是text/plain、application/octet-stream或者干脆是空值，那问题就出在这里——服务器没有正确配置MIME类型。WOFF2必须返回font/woff2（注意，不是application/font-woff2），TTF则必须是font/ttf。如果是Nginx，需要加上type font/woff2 woff2;；Apache的话，要启用mod_mime，并添加AddType font/woff2 .woff2。

禁用网页强制字体替换并临时绕过CSS干扰

有时候是浏览器扩展在背后搞鬼。在“元素”面板里Command + F搜索font-family，定位到那些覆盖性强的全局CSS或内联样式，点击旁边的小方块图标取消勾选。如果文字立刻变正常了，那就说明是被第三方样式劫持了。

另一个快速排查方法是：按下Shift + Command + N打开无痕窗口，直接访问原网页。如果无痕模式下字体显示正常，那多半是已启用的扩展（比如Dark Reader、uBlock Origin）在注入字体覆盖CSS，或者拦截了字体请求。这种情况，禁用对应的扩展就行了。

重置Safari本地字体渲染策略

系统层面的渲染策略也可能导致问题。第一步，关闭亚像素抗锯齿。打开“终端”，依次执行这两条命令：

defaults write com.apple.Safari CGFontRenderingFontSmoothingDisabled -bool YES
defaults write NSGlobalDomain AppleFontSmoothing -int 0

第二步，清空字体缓存。关闭Safari后，在终端运行：atsutil databases -removeUser && atsutil server -shutdown && atsutil server -ping

完成这两步后，重启Safari再访问网页。此时文字会以灰度抗锯齿的方式呈现，边缘锐利，不会再有那种彩色的镶边出现。

验证并修复系统级字体冲突

如果以上步骤都走完了问题还在，那问题可能出在系统字体本身。打开“字体册”（Font Book），左侧选择“用户”，然后在顶部菜单栏点击“文件 > 验证字体”。等扫描完成后，对所有标红、显示“损坏”或“重复”的字体执行“停用”操作，最后重启Mac。这一步会强制系统重建字体索引和渲染缓存，解决因第三方字体安装异常，导致Safari无法枚举可用字重的问题。