Featured image of post Safari 中文字体变宋体、显示不统一混用不同字体？完整修复方法，CSS恢复默认苹方黑体
开源项目 macOS

Safari 中文字体变宋体、显示不统一混用不同字体？完整修复方法，CSS恢复默认苹方黑体

Safari 浏览中文网页时，部分文字会从苹方突然回退成宋体或明体。本文介绍一个只修复 CJK 字体回退、不强制替换英文与网页原有衬线设计的轻量 CSS 方案。

English

作者： 小景

文章来源： https://jingyuan-zheng.github.io/zh/p/safari-chinese-font-songti-fallback-fix/

本文介绍一个面向 macOS Safari 的中文字体修复方案：下载一个 CSS 文件并在 Safari 中选中它，就能让意外变成宋体的中文恢复为苹方。

如果你遇到的是下面这种情况，这个方案通常正好适用：

  • 同一个网页里，大部分中文正常，部分按钮、导航或正文却突然变成宋体；
  • Chrome 中显示正常，Safari 中却不一致；
  • 英文和数字没有问题，只有中文字体看起来很突兀。

这通常不是乱码，也不用重装字体或 Safari。可以先直接按下面的方法修复，技术原因放在后面解释。

先把问题解决

我为这个问题整理了一个开源方案：Safari CJK Font Fallback Fix。它只有一个 CSS 文件，不需要安装字体或 Safari 扩展。

  1. 下载项目中的 safari-fix.css。
  2. 打开 Safari，进入“Safari 浏览器 → 设置 → 高级”。
  3. 在“样式表”菜单中选择刚刚下载的 safari-fix.css。
  4. 使用 Command+Q 完整退出 Safari，然后重新打开。
Safari 高级设置中的样式表选择菜单
图 1：在 Safari“设置 → 高级 → 样式表”中选择 safari-fix.css。

只刷新网页可能不会生效，一定要完整退出并重新打开 Safari。以后如果想停用，回到同一个菜单改为“未选择”即可。

项目地址：Jingyuan-Zheng/Safari-CJK-Font-Fallback-Fix。如果它解决了你的问题，也欢迎在 GitHub 上点一个 Star，让更多遇到同样问题的人更容易发现它。

修复前后有什么区别

下面是同一个 B 站页面的实际对比。图 2 是正常的苹方效果，图 3 则是 Safari 意外显示宋体时的效果。

B 站页面中的中文在 Safari 中正常显示为苹方
图 2：正常效果，页面中的中文使用苹方。
B 站页面中的部分中文在 Safari 中意外显示为宋体
图 3：异常效果，同一页面中的部分中文变成宋体。

为什么这个方案比网上的常见办法更好

网上常见的做法，是强制所有网页、所有文字都使用苹方。这样确实简单，但更像是把整个网站的排版重新刷了一遍。

它可能带来新的问题：

  • 网页图标变成方块；
  • 代码块失去原来的等宽字体；
  • 英文标题和数字也被一并改掉；
  • 网站本来有意使用的宋体、楷体或仿宋被错误替换。

这个项目采用的是更克制的方式：只补上缺失的中文字体，不接管整个网页的设计。

因此，启用后：

  • 意外变成宋体的中文会优先恢复为苹方；
  • 英文、数字、图标和代码字体继续使用网站原来的设置；
  • 网站明确选择的宋体、楷体和仿宋仍然保留；
  • 普通文字和粗体会使用对应的苹方字重；
  • 一个文件即可作用于 Safari，不必为每个网站分别安装脚本。

它修复的是“意外回退”，而不是把所有网页强行统一成一种字体。

为什么 Safari 会突然选到宋体

很多网页首先指定 Arial、Helvetica、Inter 或 Roboto 等西文字体。这些字体能显示英文和数字，却不一定包含中文。Safari 遇到汉字时，只能继续寻找另一种可用字体，有时最终就选到了宋体。

这就是所谓的“字体回退”：首选字体没有某个字符时，浏览器自动换用另一种字体来显示。不同浏览器的选择结果可能不同，所以同一个页面才会出现 Chrome 正常、Safari 却变成宋体的情况。

这个项目做的事情，可以简单理解为：当常见西文字体缺少中文时，告诉 Safari 优先用 macOS 自带的苹方补上；英文和网页原有的其他字体不动。

如果你对实现细节感兴趣，下面是最核心的一小段。它表达的意思是：当 Arial 缺少中文字符时，只用苹方补上指定的中文范围。

1
2
3
4
5
6

@font-face {
    font-family: "Arial";
    src: local("PingFangSC-Regular");
    unicode-range: U+3000-303F, U+3400-4DBF,
        U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

实际文件还包含粗体、繁体中文、扩展汉字，以及 Helvetica、Roboto、Inter、微软雅黑等常见字体名称的完整规则。不要只复制上面的示例片段，直接下载项目维护的完整 safari-fix.css 即可。

隐私与适用范围

项目只有 CSS，不含 JavaScript，不读取浏览记录、账号或网页内容，不包含统计与遥测，也不会发起网络请求。

它面向 macOS 上的 Safari。网页内嵌区域、特殊组件以及图片中的文字可能不受影响；如果网站刻意采用“英文无衬线、中文宋体”的设计，样式表也不一定能百分之百判断设计者的意图。

常见问题

为什么导入后没有立即生效？

请使用 Command+Q 完整退出 Safari，再重新打开。普通刷新通常不会重新读取用户样式表。

它会把所有宋体都换成苹方吗？

不会。项目保留了明确指定的宋体、楷体和仿宋，只处理本应采用无衬线字体却发生错误回退的情况。

会影响英文 Arial 或 Helvetica 吗？

不会。样式表只为中文字符补充苹方，英文字母、数字、字宽和间距仍由原字体处理。

需要安装字体或 Safari 扩展吗？

不需要。苹方是 macOS 的系统中文字体，Safari 本身支持加载用户样式表。

一个小问题，也值得被认真修好

字体回退很少让网页彻底不能用，但它会不断制造细小的视觉跳变。尤其在一整页干净的苹方中突然出现一行宋体时，你很难再假装没有看见。

这个项目不试图替网站决定所有排版，只在浏览器缺少合适的中文无衬线字形时，补上更符合 macOS 阅读体验的那一块。一个 CSS 文件，随时启用、随时关闭，也不要求把浏览权限交给扩展。

如果你遇到新的 Safari 中文字体回退问题，可以在 GitHub Issues 提交公开复现网址、实际 font-family、macOS 与 Safari 版本，以及预期和实际字体。请不要附上私人网址、账号信息或浏览记录。

参考资料

相关阅读