怎样修复CSS自定义字体在Safari中显示过粗

Safari中自定义字体过粗是因默认启用subpixel-antialiased导致，需对目标元素用antialiased覆盖；同时须确保@font-face显式声明font-weight/font-style、字体真实支持对应字重，并保留hinting信息。

为什么Safari里自定义字体看起来过粗

这不是字体文件本身变粗了，而是 Safari 对 @font-face 加载的字体默认启用 -webkit-font-smoothing: subpixel-antialiased，在 Retina 屏上会强化横向笔画渲染，导致中文字体（尤其黑体类）视觉加粗、发虚、边缘带彩边。Chrome 和 Firefox 不走这套逻辑，所以同一份 CSS 在它们里面看着“正常”——这恰恰是问题根源。

用 -webkit-font-smoothing: antialiased !important 精准覆盖

必须只对使用自定义字体的容器生效，不能写在 body 或 * 上，否则输入框、按钮、下拉菜单等原生控件文字会变硬、断笔、可读性下降。

1. 给目标元素加专属 class，比如 .headline、.body-text
2. CSS 规则里明确写：font-family: "MyFont", sans-serif; + -webkit-font-smoothing: antialiased !important;
3. 不要加 -moz-osx-font-smoothing：iOS Safari 不认，纯属冗余
4. 避免用 none：该值已废弃，部分 iOS 版本直接忽略，且影响辅助功能缩放

示例：

h1.headline {font-family: "Inter", sans-serif;-webkit-font-smoothing: antialiased !important;}

检查 @font-face 声明是否触发了隐式字重映射

Safari 会对缺失 font-weight 或 font-style 的 @font-face 规则做宽松匹配，比如你只声明了 font-weight: 600 但没写 font-style: normal，后续用 font: 600 16px "MyFont" 时，它可能 fallback 到系统黑体（如 PingFang SC）并叠加渲染，造成“双粗”效果。

1. 每个 @font-face 必须显式配对 font-weight 和 font-style，哪怕都是 normal
2. 确保网页中实际使用的 font-weight 值，和字体文件真实支持的字重一致（比如文件只含 Regular，就别写 font-weight: 500）
3. 用 Safari 开发者工具 → “计算样式” 面板，展开 font 查看最终解析出的 font-family 和 font-weight，确认没被悄悄替换

留意字体 hinting 与 WOFF2 压缩带来的渲染差异

某些工具导出的 WOFF2 字体为了体积压缩，会剥离 hinting 信息。Safari 在 antialiased 模式下对无 hinting 字体的笔画控制力较弱，小字号下容易出现局部加粗或模糊——这不是 CSS 能修的，得回源头处理。

1. 用 woff2_compress 或 FontTools 重新导出时保留 hinting（如 TrueType 的 glyf 表）
2. 测试时务必用真机 Safari，模拟器渲染结果不可信
3. 如果只在 iOS 17+ 出现过粗，而 iOS 16 正常，大概率是 WebKit 新增的 subpixel 渲染优化策略导致，此时更需严格限定 -webkit-font-smoothing 的作用域

最易被忽略的是：同一页面混用系统字体（如 SF Pro）和自定义字体时，不能靠继承统一设 smoothing，必须按容器分别声明。否则要么系统字体变糊，要么自定义字体还是粗。