正确写法是将 -apple-system 和 Roboto 前置并补 sans-serif，顺序错、引号漏、兜底写成 "sans-serif" 三类错误会导致降级链失效；浏览器从左到右匹配系统字体，iOS 有 Helvetica Neue 而 Android 没有，故需按平台优先级排序。
直接把 -apple-system 和 Roboto 前置，再补上 sans-serif 就能解决 90% 的跨端字体不一致问题；但顺序错、引号漏、兜底写成 "sans-serif" 这三类错误，会让整个降级链在 Android 或 iOS 上直接失效。
font-family 列表为什么在不同机型走不同分支
浏览器不是“选一个最像的”，而是从左到右查系统里是否存在对应字体文件，找到就停，后续全跳过。iOS 系统有 "Helvetica Neue"，Android 根本没这个文件，自然秒切到下一个；微信旧版 WebView 甚至会绕过整个列表，强制用内核内置字体。
-
-apple-system必须放最前——iOS 13+ 实际指向 San Francisco，是原生最优解 -
Roboto紧跟其后——Android 原生默认，无需引号（它是关键字，不是文件名） - 中文字体如
"PingFang SC"、"Hiragino Sans GB"必须加英文双引号，否则解析失败 -
sans-serif必须保留且不加引号——写成"sans-serif"会被当自定义字体名，直接失效
常见错误：引号、顺序、兜底写法
这三个点看似小，却是线上字体渲染翻车最高频的原因：
- 把
Roboto放在"Microsoft YaHei"前面，安卓设备会硬加载微软雅黑（如果存在），但加载慢、触发重排、还可能发虚 - 漏掉引号：
PingFang SC→ 解析为两个独立字体名PingFang和SC，全部失败 - 兜底写成
"sans-serif"→ 浏览器去系统里找叫 “sans-serif” 的字体文件，找不到，最终 fallback 到 UA 默认字体（可能是 Times New Roman） - 混用平台逻辑：比如把 Windows 的
"Segoe UI"放在 iOS/Android 字体前面，既无意义又增加匹配开销
推荐的跨端 font-family 写法
以下写法已覆盖 iOS、Android、Windows、macOS 主流环境，且兼顾可维护性与性能：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
-
BlinkMacSystemFont是 macOS Chrome/Firefox 的等效写法，和-apple-system并存不冲突 -
"Segoe UI"放在Roboto前，因 Windows 设备也可能跑 WebKit 内核（如部分 Electron 应用） - 中文字体按地域常用度排序：
"PingFang SC"（iOS/macOS）、"Hiragino Sans GB"（日文用户多见）、"Microsoft YaHei"（国内 PC 端存量大） - 最后必须是无引号的
sans-serif，这是唯一能保证所有平台都识别的通用族名
真正容易被忽略的是：字体栈生效的前提是元素没被其他 CSS 覆盖 font-family，比如 button、input 这类表单控件自带 UA 样式，常悄悄重置字体；所以关键组件要显式声明，不能只靠 body 继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
