font-family属性是CSS中用来指定元素文本内容所使用的字体的属性，通过合理设置该属性，可以让页面文本呈现出符合设计预期的显示效果，同时适配不同用户的设备环境。
font-family属性的基本语法
font-family属性的语法结构非常简单，可以接收一个或多个字体名称作为值，多个字体之间用英文逗号分隔，浏览器会按照从左到右的顺序依次尝试加载字体，直到找到当前设备已安装的字体为止。
基本语法格式如下：
/* 单个字体设置 */
.element {
font-family: "微软雅黑";
}
/* 多个字体设置（字体栈） */
.element {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
字体名称的书写规范
在使用font-family属性设置字体时，字体名称的书写需要遵循以下规则：
- 如果字体名称包含空格、中文或者特殊字符，需要用英文双引号包裹字体名称，比如<code>"PingFang SC"</code>、<code>"微软雅黑"</code>。
- 如果字体名称是单个英文单词且没有特殊字符，可以不用加引号，比如<code>Arial</code>、<code>Helvetica</code>。
- 字体名称的拼写需要和字体实际名称完全一致，区分大小写，错误的拼写会导致字体无法被正确识别。
字体栈的搭建逻辑
由于不同操作系统预装的字体不同，比如Windows系统预装了微软雅黑，macOS系统预装了PingFang SC，Linux系统可能没有这两种字体，因此直接设置单个字体很容易出现部分设备显示异常的问题。此时就需要搭建字体栈，按照优先级排列多个字体，确保各个设备都能找到可用的字体。
常见的字体栈搭建示例如下：
/* 中文内容常用字体栈 */
body {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
/* 英文内容常用字体栈 */
.english-text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
通用字体族的作用
在字体栈的最后，通常都会添加一个通用字体族作为兜底选项，通用字体族不需要加引号，CSS定义了5种通用字体族：
| 通用字体族名称 | 说明 |
|---|---|
| serif | 衬线字体，字体笔画末端有装饰，比如宋体、Times New Roman |
| sans-serif | 无衬线字体，字体笔画末端没有装饰，比如微软雅黑、Arial |
| monospace | 等宽字体，每个字符宽度相同，常用于代码展示，比如Consolas、Courier New |
| cursive | 手写体，模拟手写效果，比如Comic Sans MS |
| fantasy | 装饰字体，有特殊装饰效果，使用场景较少 |
添加通用字体族后，即使前面的所有具体字体都没有被设备安装，浏览器也会从对应通用字体族中选择一个默认字体进行显示，避免出现无字体可用的情况。
实际使用示例
下面是一个完整的页面字体设置示例，同时适配中英文内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font-family使用示例</title>
<style>
/* 全局字体设置 */
body {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
line-height: 1.6;
}
/* 代码块字体设置 */
code {
font-family: "SF Mono", "Fira Code", "Consolas", "Monaco", monospace;
background-color: #f5f5f5;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<p>这是一段中文测试文本，查看字体显示效果。</p>
<p>This is a paragraph of English test text to check the font rendering effect.</p>
<p>代码片段示例：<code>console.log("hello world")</code></p>
</body>
</html>
注意事项
- 不要设置过多无意义的字体在字体栈中，会增加浏览器解析负担，一般设置3-5个具体字体加一个通用字体族即可。
- 如果需要使用自定义网络字体，需要先通过<code>@font-face</code>规则引入字体文件，再将字体名称添加到font-family属性中。
- 部分老旧浏览器对特殊字体的支持有限，设置字体栈时要优先选择兼容性好的通用字体。
font-family字体栈通用字体族css样式修改时间：2026-06-28 17:45:30