SF Pro Text 在 Android 上无法加载，因其为苹果私有字体；应隔离平台字体栈：iOS 用 system-ui/-apple-system，Android 用 Roboto/Noto Sans SC，并避免混写导致解析失效。
font-family: "SF Pro Text" 在 Android 上根本不会加载
因为 SF Pro Text 是苹果私有字体，只预装在 iOS/macOS 系统中，Android 设备本地 /system/fonts/ 目录里压根不存在这个文件。浏览器解析 font-family 时，一旦在系统字体列表中命中了前面的 Roboto（Android 默认无衬线体），后续的 "SF Pro Text" 就被完全跳过 —— 不会尝试 fallback，也不会报错，静默失效。
写在同一行 font-family 列表里等于白写
常见错误写法：font-family: -apple-system, "SF Pro Text", Roboto, sans-serif;
问题在于：
- Android Chrome / WebView 会先匹配
Roboto，匹配成功后直接终止查找，"SF Pro Text"永远不参与解析 - iOS Safari 虽识别
-apple-system，但对引号包裹的"SF Pro Text"支持不稳定（尤其旧版），且它和-apple-system功能重叠，反而可能干扰字重映射 - 即使你用
@font-face手动引入 SF 字体文件，Android 也不允许加载苹果签名字体，WOFF2 文件会被拒绝解析
真要复刻 SF 视觉效果，得换思路
不能靠“声明名字”，而要靠“条件加载 + 精确控制”：
立即学习“前端免费学习笔记（深入）”；
- 对 iOS：用
@supports (font-family: system-ui)单独声明system-ui, -apple-system, sans-serif，让系统自动调用 San Francisco 变量字体（含真实字重轴） - 对 Android：用
@supports not (font-family: system-ui)隔离出规则，配Roboto, "Noto Sans SC", sans-serif，并显式限制font-weight只用 400/500/700（避开 Android 对 500 的降级 bug） - 若设计强依赖 SF 的字形细节（比如按钮圆角、标点间距），必须用
@font-face加载开源替代品（如 Inter 或 IBM Plex Sans），并确保 WOFF2 子集 ≤200KB，配合font-display: optional和<link rel="preload">
最容易被忽略的一点：字体栈不是越长越保险
把 "SF Pro Text" 和 Roboto 塞进同一行，看似“多写一个保一分”，实际破坏了各平台的原生字体链路。现代移动端字体策略的核心是「隔离」—— 让每个系统只看到它能用、且能用好的那一组值。混写不仅无效，还会拖慢 CSS 解析，干扰浏览器对 system-ui 的特性检测。
