font-family 的优先级规则是按声明顺序从左到右匹配第一个可用字体，位置靠前的优先级更高，带空格的字体名需加引号，通用字体族如 sans-serif 应放在最后作为兜底，确保跨平台兼容性。
在CSS中，font-family 属性用于指定元素使用的字体族。当列出多个字体时，浏览器会按照声明顺序选择第一个可用的字体。这个机制本质上就是一种优先级规则：靠前的字体优先使用，如果系统找不到或不支持，就尝试下一个。
字体族列表的优先级顺序
你可以在 font-family 中定义一个字体堆栈（font stack），包含多个字体名称，用逗号分隔：
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;浏览器按以下逻辑处理：
- 从左到右依次检查每个字体是否可用
- 一旦找到系统中存在的字体，就立即应用它
- 如果都没有，则使用最后一个通用字体族作为兜底
具体优先级规则说明
实际生效顺序由以下几个因素决定：
立即学习“前端免费学习笔记（深入）”；
- 位置优先：写在前面的字体拥有更高优先级。例如 "Times New Roman" 会比 Times 先被尝试
- 引号保护特殊名称：带空格的字体名应加引号，如 "Courier New"，否则解析可能出错
- 通用字体族放最后：如 serif、sans-serif、monospace 等，作为备用选项，确保页面始终可读
- 自定义字体不影响顺序逻辑：通过 @font-face 引入的字体也遵循相同匹配规则，只要字体已加载成功即可使用
常见实践建议
为了保证跨平台兼容性和视觉一致性，推荐这样写：
font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;- 把现代UI字体放在前面（如 Segoe UI 适用于Windows，Roboto 适用于Android）
- 保留传统字体作为降级方案
- 结尾加上通用字体族防止完全失效
基本上就这些。font-family 的“优先级”并不复杂，关键是理解它是的过程，不是权重计算。只要排列合理，就能在不同设备上获得最佳可用字体。不复杂但容易忽略细节。
