字体列表顺序决定浏览器加载优先级，从左到右依次查找可用字体，未找到则回退到默认字体。包含空格或特殊字符的字体名需加引号，推荐始终添加通用字体族如sans-serif作为最终回退。通过@font-face引入的自定义字体在成功加载后会按顺序参与匹配并优先使用。合理设置字体堆栈可确保跨设备良好显示。
在CSS中，font-family 属性用于指定文本的字体系列。当浏览器渲染文字时，会按照你设定的字体列表顺序，逐个尝试加载字体，直到找到系统或页面中可用的字体为止。这个过程遵循一套明确的优先级规则。
字体列表的顺序决定优先级
你写在 font-family 中的字体名称顺序，就是浏览器查找字体的顺序。浏览器从左到右依次检查每个字体是否可用（即是否安装在用户系统中或已通过 @font-face 加载）。
- 排在前面的字体优先被使用
- 如果第一个字体不存在，就尝试第二个
- 依此类推，直到找到匹配字体
- 若都不可用，则使用浏览器默认字体（通常是 serif 或 sans-serif）
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
浏览器先尝试 "Helvetica Neue"，找不到就用 Helvetica，再找不到就用 Arial，最后 fallback 到系统无衬线字体。
使用引号处理特殊字体名
包含空格、连字符或关键字的字体名应加引号，避免解析错误。
立即学习“前端免费学习笔记（深入）”；
- "Times New Roman"：必须加引号
- Georgia：不加引号也可以
- "Courier New"：推荐加引号更安全
不加引号可能导致某些情况下字体无法正确识别。
通用字体族作为最终回退
在自定义字体之后，建议始终指定一个通用字体族（generic family），确保在所有情况下都有合理显示。
- sans-serif：如 Arial、Helvetica
- serif：如 Times, Georgia
- monospace：等宽字体，如 Courier
- cursive、fantasy：装饰性字体，较少使用
这些不是具体字体，而是字体类别，由系统自动选择合适的字体显示。
@font-face 自定义字体优先于系统字体
如果你通过 @font-face 引入了网络字体，并在 font-family 中使用了对应的名字，只要资源加载成功，它就会按声明顺序参与匹配。
@font-face {
font-family: 'CustomFont';
src: url('custom.woff2') format('woff2');
}
body {
font-family: CustomFont, Arial, sans-serif;
}
即使 Arial 在系统中存在，只要 CustomFont 成功加载，就会优先使用它。
基本上就这些。关键点是顺序决定一切，加上合理回退，就能保证文字在不同设备上都能良好显示。不复杂但容易忽略细节。
