系统字体需按平台分组声明并严格排序：macos用"-apple-system","blinkmacsystemfont"，windows用"segoe ui","roboto"，linux用"ubuntu","cantarell"等，末尾必加"sans-serif"；含空格字体名须加双引号，大小写敏感，避免无效声明导致整链失效。
font-family 里系统字体怎么写才不掉链子
直接写 "Helvetica" 或 "Segoe UI"，浏览器大概率会 fallback 到默认字体——不是因为名字错了，而是你没告诉它“这玩意儿在哪个系统上才存在”。系统字体必须按平台分组声明，且顺序即回退优先级。
- macOS 用
"-apple-system", "BlinkMacSystemFont"（Safari/Chrome 都认） - Windows 用
"Segoe UI", "Roboto"（注意"Segoe UI"在 Win7+ 才预装，Win10 前可能 fallback 到"Tahoma"） - Linux 没统一字体，
"Ubuntu", "Cantarell", "Fira Sans"是常见发行版自带，但得靠用户装了才生效 - 最后一定要加通用族名：
"sans-serif"，否则 iOS Safari 15.4+ 等新版本可能直接忽略整条声明
font-family 安全写法：为什么不能只写英文名
写 "Helvetica Neue, Arial, sans-serif" 看似稳妥，但 "Helvetica Neue" 在 Windows 和 Android 上根本不存在；而 "Arial" 在 macOS 上渲染偏肥、字重不一致。这不是字体“找不到”，是字体度量（metrics）和 hinting 行为差异导致排版断裂。
- 跨平台时，同一
font-weight在不同系统上实际渲染粗细可能差 1–2px - Android Chrome 对
"Roboto"的支持从 v4.4 开始，旧机型 fallback 到"Droid Sans"，但后者不支持中文粗体 - 中文必须显式声明：比如
"PingFang SC", "Hiragino Sans GB"，不能指望"sans-serif"自动挑出合适的中文字体
font-family 回退链里哪些值会被浏览器静默忽略
浏览器对非法或不可用的字体名不会报错，而是跳过它继续往后找——但有些写法会让整段声明失效。最典型的是带空格又没引号的字体名，比如写成 PingFang SC（没引号），解析器直接当两个独立字体处理，后续全部作废。
- 所有含空格、连字符、数字开头的字体名，必须用英文双引号包裹：
"SF Pro Display"✔️，SF Pro Display❌ -
"system-ui"是 CSS 标准关键字，不是真实字体，现代浏览器（Chrome 61+, Firefox 57+, Safari 11.1+）才支持，老版本会跳过它 - 不要混用引号类型：
'Helvetica'和"Arial"同时出现，部分旧版 WebView 会截断解析 - 字体名大小写敏感：
"roboto"≠"Roboto"，后者才是标准写法
移动端特别要注意的 font-family 兼容坑
iOS 和 Android 对 font-family 的解析逻辑不同：iOS 严格按顺序匹配，Android（尤其低版本 WebView）会合并多个声明、甚至把 "-apple-system" 当普通字符串尝试加载——结果白屏或卡顿。
- iOS Safari 13.4+ 开始支持
"system-ui"，但若前面写了无效字体（如"San Francisco"这种非标准名），它可能拒绝启用整个回退链 - 微信内置浏览器（X5 内核）对
"PingFang SC"支持不稳定，建议补上"Heiti SC"作为二级 fallback - Android Chrome 80+ 默认禁用本地字体访问（出于隐私），但
font-family声明不受影响；真正影响的是@font-face加载本地 ttf，和这里无关
最麻烦的不是写错某个名字，而是你以为 fallback 成功了，其实浏览器早悄悄跳过了前三项，最后只用了 "sans-serif"——还看不出差别，直到设计师说“这个按钮字怎么比设计稿胖一圈”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
