移动端字体渲染需分层声明而非堆砌font-family；ios与android字形、hinting、字重映射不同，须用@supports+system-ui隔离；安卓font-weight描边fallback须主动切断。
移动端网页的字体渲染差异，不能靠单一 font-family 列表“堆砌”解决；必须按系统特性分层声明，并主动切断安卓对 font-weight 的描边 fallback。
为什么 font-family 列表在 iOS 和 Android 上表现不一致
iOS 的 -apple-system 和 Android 的 Roboto 不仅是名字不同，底层字形、hinting 策略、字重映射规则都不同。比如 PingFang SC 在 iOS 上支持 100–900 全字重，而 Android 系统级 Roboto（尤其旧版）只提供 400/500/700 三档，且 500 常被忽略或降级为 400。
常见错误是写成这样：
font-family: -apple-system, Roboto, "PingFang SC", "Helvetica Neue", sans-serif;
问题在于：Android 设备会优先匹配 Roboto，但后续的 "PingFang SC" 被完全跳过 —— 即使你引入了 Web Font，CSS 优先级也不会让它覆盖已命中的系统字体。
- Android WebView / Chrome for Android 默认启用
font-feature-settings: "liga";，但不支持 OpenType 字重轴，导致font-weight: 500无法生效 - iOS Safari 对
font-feature-settings更保守，但能真实调用 San Francisco 的 variable weight - 华为、小米等厂商定制内核（如 X5）可能直接禁用非白名单字体回退逻辑
正确写法：用 @supports + system-ui 分层隔离
关键不是“列得全”，而是“让每个系统只看到它能用的那部分”。现代方案应放弃单行 font-family，改用条件加载：
@supports (font-family: system-ui) {
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
}
@supports not (font-family: system-ui) and (font-family: ui-sans-serif) {
body {
font-family: ui-sans-serif, Roboto, "Noto Sans SC", sans-serif;
}
}
注意：system-ui 是 CSS 标准值，在 iOS 15.4+、Android 12+、Chrome 89+ 支持良好；ui-sans-serif 是更安全的 fallback，由浏览器映射到当前平台默认无衬线体。
- 不要把
"PingFang SC"和Roboto写在同一声明里 —— 它们互斥，且PingFang SC在 Android 上无意义 - 若需 PingFang 视觉效果，必须通过
@font-face显式加载 WOFF2，并在 iOS 专属规则中单独声明 -
BlinkMacSystemFont仅在 macOS Chrome/Firefox 有效，iOS Safari 不识别，所以它和-apple-system要分开写，避免干扰
font-weight 失效时，别碰描边 hack
安卓上 font-weight: 700 显示发虚，本质是系统没对应字重文件，渲染层只能描边模拟。此时加 -webkit-text-stroke 或 text-shadow 只会让文字更臃肿、可读性下降，且在高 DPI 屏幕上边缘锯齿更明显。
- 真正有效的做法：对关键文案（标题、按钮），用
@font-face加载含多字重的 Web Font，例如Noto Sans SC:wght@300;400;500;700 - 必须显式写
font-weight: 500+font-family: 'Noto Sans SC', sans-serif，不能只依赖font-weight数值触发回退 - 避免使用
bolder/lighter—— 各平台计算基准不同，iOS 按 San Francisco 的字重轴算，安卓按 Roboto 的离散档位算，结果不可控
容易被忽略的细节：font-display 和 layout shift
即使字体列表写对了，如果 Web Font 加载慢，页面会先用系统字体渲染，再闪动替换成 Web Font —— 这就是 CLS（累积布局偏移）。实测中，未设 font-display 的 TTF 字体可造成 CLS 高达 0.6。
- 必须为所有
@font-face设置font-display: swap，确保文本始终可见，只是暂用 fallback - WOFF2 格式比 TTF 小 60%+，加载更快，但 iOS 14.5 之前不支持 WOFF2 的 variable weight，所以多字重场景建议同时提供 WOFF2 + TTF
- Android 10 以下设备不支持
font-display，需配合document.fonts.load()手动控制渲染时机
最麻烦的点其实是：你没法靠 CSS “强制统一”渲染效果。系统字体栈是硬约束，能做的只有精准适配、主动隔离、资源兜底 —— 任何想用一行 font-family 解决所有问题的思路，都会在真机测试时被打脸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
