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 后强制走灰度抗锯齿，视觉更锐利。
- 仅对
@font-face加载的字体有效，系统字体（如"San Francisco"）无需处理 - 必须加
!important才能覆盖 iOS Safari 的 UA 样式默认值 - 不要全局设置在
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 至今仍依赖它。
- 避免写成
-webkit-font-smoothing: none—— 这个值已被废弃，部分 iOS 版本会直接忽略 - 不要混用
text-rendering: optimizeLegibility，它可能加剧锯齿感，尤其在小字号下 - 如果字体本身含 hinting 信息不足（常见于某些压缩 TTF），
antialiased效果仍有限，需配合字体工具重导出
为什么不能无差别加 antialiased
因为 iOS 对不同字体族的渲染策略不同。系统字体（如 "SF Pro Display"）在 subpixel-antialiased 下反而最清晰；强行统一设为 antialiased 会导致标题变“硬”、小字号文字发虚、甚至出现字形断裂（特别是连笔中文字）。
- 测试时务必在真机 Safari 上验证，模拟器渲染不准确
- 同一页面中混合使用系统字体和自定义字体时，必须按容器区分设置，不能靠继承
- 某些 UI 框架（如 Ionic、Capacitor WebView）会注入全局样式，可能覆盖你的
!important，需检查 computed styles 确认是否生效
替代方案：字体加载 + fallback 配合优化
单靠 -webkit-font-smoothing 治标不治本。真正减少锯齿感，得从字体源头和加载时机入手：
- 优先选用带完整 hinting 的 WOFF2 字体，比 TTF 在移动端渲染更稳
- 用
font-display: swap避免 FOIT，但首次渲染仍可能触发系统 fallback，此时锯齿来自系统字体，无法靠 CSS 修复 - 对关键文案（如 logo 文字），可考虑 SVG 替代 —— 完全绕过字体渲染链
最常被忽略的一点：iOS 15.4+ 开始，部分机型在深色模式下对 antialiased 的表现有细微差异，建议在深浅色模式下都做真机截图比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
