字体族属性
最后更新：2026-09-13
font-family 字体族属性
font-family 用于指定元素文本使用的字体名称或通用字体族。可以列出多个字体作为回退列表，浏览器从前向后选用第一个可用的字体。
| 分类 | |
|---|---|
| 初始值 | depends on user agent |
| 继承 | 是 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
font-family: [ <family-name> | <generic-family> ]#;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<family-name> | 类型 | 字体名称，如 'Microsoft YaHei' |
<generic-family> | 关键字 | 通用字体族：serif/sans-serif/monospace |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-family | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 含空格或特殊字符的字体名必须用引号包裹，如 "Times New Roman"。
重要： 列表末尾建议始终写一个通用字体族（serif/sans-serif/monospace）作为兜底。
❓ 常见问题
Q中文网页用哪些字体比较好？
A常用跨平台回退链："PingFang SC", "Microsoft YaHei", sans-serif；英文可加 Helvetica、Arial。Windows 上微软雅黑、macOS 上苹方会自动命中，最后用 sans-serif 兜底保证任何系统都能显示。
Q自定义字体怎么引入？
A先用 @font-face 声明字体，如 @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }，再把 'MyFont' 写进 font-family 列表。建议使用 woff2 格式，列表末尾保留通用字体族兜底。
Qfont-family 同时列多个字体，顺序重要吗？
A重要。浏览器按从左到右的顺序检查字体是否已安装，第一个可用的即被采用，后面的不会再用。所以列表要按优先度排序，末尾的通用字体族（serif/sans-serif/monospace）作为最终兜底。
🏷️ 相关属性
💡 相关案例
📚 相关教程
