font-family 是声明有优先级的字体查找路径，需用逗号分隔并以通用字体族（如sans-serif）结尾；中文字体应单独处理或置于西文字体后、通用族前；系统字体须按平台习惯排序。
font-family 不是“设置一个字体”，而是声明一条有优先级的字体查找路径——浏览器按顺序找，找到第一个可用的就停。没兜底？那由浏览器自己决定用什么，结果不可控。
font-family 值必须用逗号分隔，且结尾必须是通用字体族
浏览器只认字体家族名（如 "Segoe UI"），不认文件后缀或本地路径。漏掉结尾的 sans-serif 或 serif，看似能跑，但一旦前面所有字体都不可用，就会退到系统默认字体（各平台不一致），排版可能突然变样。
- 正确写法：
font-family: "Inter", "Segoe UI", "Roboto", sans-serif; - 错误写法：
font-family: "Inter", "Segoe UI", "Roboto";（缺兜底，风险高） - 引号只在含空格/特殊字符时必需，
Arial可不加，但"Helvetica Neue"必须加 - 不要混用中英文字体名却不分类，比如把
"Microsoft YaHei"和"Noto Sans"并列却没统一归到sans-serif逻辑下，容易在某些 Linux 或旧 Android 上跳过中文而用错西文字体
系统字体名要按平台习惯排序，不能只看“好不好听”
不同操作系统预装的 UI 字体不同：-apple-system 在 macOS/iOS 上渲染最顺滑，Segoe UI 是 Windows 10+ 默认，Roboto 主导 Android，Ubuntu 和 Cantarell 则常见于主流 Linux 发行版。把 Segoe UI 放最前，在 macOS 上就永远用不上 -apple-system。
- 推荐顺序（现代无衬线场景）：
"Inter", "-apple-system", "Segoe UI", "Roboto", "Noto Sans", sans-serif -
-apple-system和BlinkMacSystemFont功能类似，但后者仅限旧版 Chrome/macOS，现在单写前者足够 - 避免把
"Helvetica"放太前——它在 Windows 上基本不存在，纯属占位；Arial才是真正跨平台 fallback
中文字体要单独考虑匹配逻辑，不能硬套西文栈
中文字体名（如 "PingFang SC"、"Microsoft YaHei"、"Noto Sans CJK SC"）和西文字体不是同一套匹配机制。直接塞进同一行 font-family，浏览器可能因字重/宽度不匹配而跳过整个字体，甚至触发回退到 sans-serif 导致中英文样式割裂。
- 稳妥做法：用 CSS 的
@font-face单独加载中文字体，或使用独立的中文字体栈 +unicode-range分段控制 - 快速兼容方案：将中文字体放在西文字体之后、通用族之前，例如：
font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; - 注意：
"SimSun"（宋体）在 macOS/Linux 上不可用，放太前反而增加回退层级；"sans-serif"结尾仍不可省
最容易被忽略的其实是字体加载时的“不可见窗口”：从页面开始渲染到首个字体就绪之间，浏览器会用临时字体撑开布局，造成重排或闪烁。这不是 font-family 本身的问题，但你设的每一条 fallback，都决定了这个窗口里用户看到的是什么——所以别只盯着“最终效果”，也得想清楚“中间那几百毫秒”。
