iOS和Android字体显示不一致的根本原因是系统默认字体不同：iOS用San Francisco（-apple-system），Android用Roboto，浏览器按font-family顺序查找本地存在的字体，找到即用，后续忽略。
直接把 -apple-system 和 Roboto 同时塞进同一个 font-family 列表里，浏览器会自动挑它“认得”的那个用——不是靠你猜，是靠系统真有这个字体文件。
为什么 iOS 和 Android 显示的字体看起来完全不一样
根本原因不是 CSS 写错了，而是两个系统压根没装对方的默认字体。iOS 有 -apple-system（映射到 San Francisco），但没 Roboto；Android 有 Roboto，但不认识 -apple-system。浏览器按顺序查字体名，找到第一个存在的就停，后面全跳过。所以写成 font-family: Roboto, -apple-system, sans-serif，在 iOS 上会跳过 Roboto 直接用 -apple-system，在 Android 上则用 Roboto ——前提是顺序对。
常见错误现象：
- 只写
"Helvetica Neue", Arial, sans-serif：Android 根本没有"Helvetica Neue"，秒退到Arial，再退到系统默认等宽体（尤其微信旧 WebView） - 中英混排时英文丑：中文字体里的 ASCII 字形通常很弱，必须显式声明西文字体栈
- 用了
system-ui却没配兼容 fallback：Chrome 56+ 支持，但 Safari、旧版 WebView 不认，直接失效
推荐的 font-family 书写顺序（含中英文适配）
顺序不是随便堆砌，而是按「平台原生首选 → 跨平台西文 → 中文主力 → 通用兜底」四层组织。以下写法已在 iOS 17+、Android 12+、Chrome/Firefox/Safari/微信 WebView 实测可用：
body {
font-family:
system-ui,
-apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Ubuntu, Cantarell,
"Helvetica Neue", Helvetica, Arial,
"PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "WenQuanYi Micro Hei",
sans-serif;
}
关键说明：
-
system-ui放最前：现代浏览器优先走它，自动匹配当前系统最佳字体 -
-apple-system和BlinkMacSystemFont紧跟其后：覆盖 iOS/macOS 全场景，包括 Safari 和 Chrome - 西文字体（
"Segoe UI",Roboto,Helvetica等）放在中文字体前：避免中文字体劫持英文渲染 - 中文字体按平台常用度排序：
"PingFang SC"（iOS/macOS）、"Microsoft YaHei"（Windows/部分 Android）、"WenQuanYi Micro Hei"（Linux/老安卓） - 结尾必须保留
sans-serif：这是最后防线，不能省；否则某些异常环境（如禁用字体的 WebView）可能回退到 serif 或更糟
用 CSS 变量统一管理，避免硬编码散落各处
别在每个组件里重复写一长串字体名。全局只定义一次，所有地方引用变量：
:root {
--font-sans:
system-ui,
-apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto,
"Helvetica Neue", Helvetica, Arial,
"PingFang SC", "Microsoft YaHei",
sans-serif;
}
body { font-family: var(--font-sans); }
code { font-family: var(--font-mono); }
这样改字体只需动一处。注意两点：
- 变量必须定义在
:root，不能写在.container或某个组件内部，否则子元素取不到 - 变量名用语义化命名（如
--font-sans），别用模糊的--text-font，后续加--font-serif或--font-mono才不会冲突
哪些情况必须放弃系统字体，改用 Web Font
系统字体快、稳、省流量，但不是万能的：
- 需要严格品牌一致性（比如所有端都必须显示 Inter 或 SF Pro）
- 要做精细字号/字重控制（系统字体在小字号下 hinting 表现不一）
- 支持古籍、繁体、小众语言字符（系统字体覆盖有限）
此时用 @font-face 加载 Web Font，但务必保留系统字体栈作为 fallback。例如：
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var-latin.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}
body {
font-family: "Inter", var(--font-sans);
}
重点在 font-display: swap：保证文本不闪白、不阻塞渲染，等 Web Font 加载完再替换。
真正容易被忽略的是中英混排时的西文字形质量——很多团队只盯着中文字体是否生效，却让英文一直跑在 "Microsoft YaHei" 里，结果数字和标点糊成一片。把西文字体栈前置，不是锦上添花，是基础需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
