CSS如何解决iOS下自定义字体锯齿_利用-webkit-font-smoothing处理

CSS如何解决iOS下自定义字体锯齿_利用-webkit-font-smoothing处理并不只看表面做法，关键还要理解相关条件、限制和后续影响。

iOS Safari自定义字体发虚是因默认启用subpixel-antialiased导致，应为@font-face字体容器单独设置-webkit-font-smoothing: antialiased!important，避免影响系统字体及原生控件。

iOS Safari字体发虚、边缘锯齿明显

这是 iOS WebKit 渲染引擎对非系统字体（尤其是中文字体或自定义 @font-face 字体）启用次像素抗锯齿（subpixel antialiasing）导致的典型现象，不是字体本身质量差，也不是 CSS 写错了。

关键点在于：iOS 默认开启 -webkit-font-smoothing: subpixel-antialiased，而该模式在 Retina 屏上反而会让非 Apple 系统字体显得模糊、发虚、有彩色边缘；换成 antialiased 后强制走灰度抗锯齿，视觉更锐利。

1. 仅对 @font-face 加载的字体有效，系统字体（如 "San Francisco"）无需处理
2. 必须加 !important 才能覆盖 iOS Safari 的 UA 样式默认值
3. 不要全局设置在 body 或 * 上——会影响输入框、按钮等原生控件的可读性

正确写法：只作用于目标文本容器

最稳妥的做法是给需要渲染自定义字体的元素单独加类，并限定作用域。比如你用 @font-face 引入了 "MyCustomFont"，那么：

.text-custom {  font-family: "MyCustomFont", sans-serif;  -webkit-font-smoothing: antialiased !important;  /* 不要加 -moz-osx-font-smoothing，iOS 不认 */}

注意：-webkit-font-smoothing 是 WebKit 专有属性，仅在 Safari / Chrome（旧版）/ iOS WebView 中生效，现代 Chrome 已弃用，但 iOS Safari 至今仍依赖它。

1. 避免写成 -webkit-font-smoothing: none —— 这个值已被废弃，部分 iOS 版本会直接忽略
2. 不要混用 text-rendering: optimizeLegibility，它可能加剧锯齿感，尤其在小字号下
3. 如果字体本身含 hinting 信息不足（常见于某些压缩 TTF），antialiased 效果仍有限，需配合字体工具重导出

为什么不能无差别加 antialiased

因为 iOS 对不同字体族的渲染策略不同。系统字体（如 "SF Pro Display"）在 subpixel-antialiased 下反而最清晰；强行统一设为 antialiased 会导致标题变“硬”、小字号文字发虚、甚至出现字形断裂（特别是连笔中文字）。

1. 测试时务必在真机 Safari 上验证，模拟器渲染不准确
2. 同一页面中混合使用系统字体和自定义字体时，必须按容器区分设置，不能靠继承
3. 某些 UI 框架（如 Ionic、Capacitor WebView）会注入全局样式，可能覆盖你的 !important，需检查 computed styles 确认是否生效

替代方案：字体加载 + fallback 配合优化

单靠 -webkit-font-smoothing 治标不治本。真正减少锯齿感，得从字体源头和加载时机入手：

1. 优先选用带完整 hinting 的 WOFF2 字体，比 TTF 在移动端渲染更稳
2. 用 font-display: swap 避免 FOIT，但首次渲染仍可能触发系统 fallback，此时锯齿来自系统字体，无法靠 CSS 修复
3. 对关键文案（如 logo 文字），可考虑 SVG 替代 —— 完全绕过字体渲染链

最常被忽略的一点：iOS 15.4+ 开始，部分机型在深色模式下对 antialiased 的表现有细微差异，建议在深浅色模式下都做真机截图比对。