在css样式开发中，font-family属性用于设置元素的字体系列，它的优先级规则决定了浏览器最终会选用哪种字体渲染页面文本，理解这个规则能避免很多字体显示不符合预期的问题。
font-family的基本语法
font-family的取值是一个字体名称的列表，多个字体之间用英文逗号分隔，语法格式如下：
/* 基本语法示例 */
.element {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
这里的字体列表就是浏览器匹配字体的候选范围，优先级规则就作用于这个列表。
font-family优先级核心规则
font-family的优先级遵循从左到右的匹配顺序，具体规则如下：
- 浏览器会按照字体列表的顺序，依次检查当前系统是否安装了对应的字体
- 如果第一个字体在当前系统中存在，就直接使用该字体渲染文本，不再检查后面的字体
- 如果第一个字体不存在，就检查第二个字体，以此类推，直到找到第一个存在的字体
- 如果所有列出的具体字体都不存在，就会使用列表最后的通用字体族来渲染文本
通用字体族的作用
通用字体族是css预定义的字体分类，不需要指定具体字体名称，浏览器会根据分类匹配系统对应的默认字体，常见的通用字体族有以下几类：
| 通用字体族名称 | 说明 |
|---|---|
| sans-serif | 无衬线字体，如常见的黑体、微软雅黑都属于这类，屏幕显示可读性更好 |
| serif | 衬线字体，如宋体、Times New Roman属于这类，印刷场景使用更多 |
| monospace | 等宽字体，每个字符宽度相同，常用于代码展示场景 |
| cursive | 手写体，模拟手写风格，使用场景较少 |
| fantasy | 装饰性字体，用于特殊装饰场景，使用频率低 |
通用字体族必须放在字体列表的最后一位，作为兜底方案，否则如果放在前面，会直接匹配通用字体，后面的具体字体设置都会失效。
实际代码示例
下面是一个兼容不同系统的字体设置示例，适配Windows、macOS、Linux等常见系统：
/* 兼容多系统的中文字体设置 */
body {
/* 依次检查：Mac系统苹方、Mac系统华文黑体、Windows系统微软雅黑、Linux系统文泉驿微米黑，最后兜底无衬线字体 */
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
/* 代码块字体设置，优先等宽字体 */
pre, code {
/* 依次检查：Mac系统Menlo、Windows系统Consolas、Linux系统DejaVu Sans Mono，最后兜底等宽字体 */
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
注意事项
- 字体名称如果包含空格或者中文，需要用英文双引号包裹，单个英文单词的字体名称可以不用引号
- 不要将系统独有的字体放在通用字体族前面，否则其他系统没有该字体时无法正确兜底
- 如果设置了
font-family: "未知字体", sans-serif;，由于第一个字体不存在，会直接使用sans-serif对应的系统默认无衬线字体
注意：字体列表的顺序直接决定优先级，调整顺序会改变最终的字体匹配结果，开发时需要根据目标用户的系统分布合理排序字体。
cssfont-family字体系列优先级规则修改时间：2026-06-10 21:09:23