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 或 * 上，否则输入框、按钮、下拉菜单等原生控件文字会变硬、断笔、可读性下降。
- 给目标元素加专属 class，比如
.headline、.body-text - CSS 规则里明确写：
font-family: "MyFont", sans-serif;+-webkit-font-smoothing: antialiased !important; - 不要加
-moz-osx-font-smoothing：iOS Safari 不认，纯属冗余 - 避免用
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）并叠加渲染，造成“双粗”效果。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 每个
@font-face必须显式配对font-weight和font-style，哪怕都是normal - 确保网页中实际使用的
font-weight值，和字体文件真实支持的字重一致（比如文件只含 Regular，就别写font-weight: 500） - 用 Safari 开发者工具 → “计算样式” 面板，展开
font查看最终解析出的font-family和font-weight，确认没被悄悄替换
留意字体 hinting 与 WOFF2 压缩带来的渲染差异
某些工具导出的 WOFF2 字体为了体积压缩，会剥离 hinting 信息。Safari 在 antialiased 模式下对无 hinting 字体的笔画控制力较弱，小字号下容易出现局部加粗或模糊——这不是 CSS 能修的，得回源头处理。
- 用 woff2_compress 或 FontTools 重新导出时保留 hinting（如 TrueType 的
glyf表） - 测试时务必用真机 Safari，模拟器渲染结果不可信
- 如果只在 iOS 17+ 出现过粗，而 iOS 16 正常，大概率是 WebKit 新增的 subpixel 渲染优化策略导致，此时更需严格限定
-webkit-font-smoothing的作用域
最易被忽略的是：同一页面混用系统字体（如 SF Pro）和自定义字体时，不能靠继承统一设 smoothing，必须按容器分别声明。否则要么系统字体变糊，要么自定义字体还是粗。
