CSS 入门教程
字体设置
本教程共 44 篇 · 第 22 篇 · 更新于 2026-07-29 · 约 10 分钟阅读
字体font-familyfont-sizefont-weightfont-style行高
22. 字体设置
本节目标：掌握 font-family、font-size、font-weight、font-style 和 line-height 的用法，能正确设置文本字体样式。
font-family —— 字体族
指定文本使用的字体。可以设置多个字体作为备选。
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}规则：优先使用第一个字体，如果用户电脑没有，就用第二个，以此类推。最后的通用族（如 sans-serif）兜底。
多单词字体名必须加引号，如
。
五大通用字体族
| 族 | 特点 | 常见字体 |
|---|---|---|
| Serif（衬线） | 字母边缘有小笔画，优雅 | Times New Roman, Georgia |
| Sans-serif（无衬线） | 线条简洁，现代感 | Arial, Helvetica, 微软雅黑 |
| Monospace（等宽） | 每个字母宽度相同 | Courier New, Consolas |
| Cursive（草书） | 模仿手写 | Comic Sans MS |
| Fantasy（装饰） | 装饰性、艺术性 | Impact |
实际开发中，用得最多的就是衬线和无衬线这两类。
中文字体推荐
body {
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}font-size —— 字体大小
常用单位
/* 像素：固定大小 */
.px-size {
font-size: 16px;
}
/* em：相对于父元素 */
.em-size {
font-size: 1.2em; /* 父元素字体的 1.2 倍 */
}
/* rem：相对于根元素（html） */
.rem-size {
font-size: 1.5rem; /* html 字体的 1.5 倍 */
}
/* 百分比 */
.percent-size {
font-size: 150%; /* 父元素的 150% */
}推荐用 rem 做字体大小，配合 html { font-size: 62.5%; }（即 10px）方便计算。
推荐基准
html {
font-size: 62.5%; /* 1rem = 10px，方便计算 */
}
body {
font-size: 1.6rem; /* 16px */
}
h1 {
font-size: 3.2rem; /* 32px */
}font-weight —— 字体粗细
/* 关键字 */
.light {
font-weight: lighter;
}
.normal {
font-weight: normal; /* 等于 400 */
}
.bold {
font-weight: bold; /* 等于 700 */
}
/* 数值：100-900，步长 100 */
.weight-100 { font-weight: 100; } /* 极细 */
.weight-300 { font-weight: 300; } /* 细体 */
.weight-400 { font-weight: 400; } /* 正常 */
.weight-600 { font-weight: 600; } /* 半粗 */
.weight-700 { font-weight: 700; } /* 加粗 */
.weight-900 { font-weight: 900; } /* 极粗 */不是所有字体都支持所有粗细，如果该粗细不存在，浏览器会找最接近的。
font-style —— 字体样式
.italic {
font-style: italic; /* 斜体 */
}
.oblique {
font-style: oblique; /* 倾斜（模拟斜体） */
}
.normal {
font-style: normal; /* 正常 */
}line-height —— 行高
控制行与行之间的间距，影响阅读体验。
/* 固定值 */
.line-fixed {
line-height: 24px;
}
/* 倍数（推荐） */
.line-multiple {
line-height: 1.6; /* 字号的 1.6 倍 */
}
/* 百分比 */
.line-percent {
line-height: 160%;
}正文行高一般设为 1.5-1.8 之间，阅读体验最佳。标题可以用 1.2-1.4。
font —— 简写属性
/* 完整简写 */
font: font-style font-weight font-size/line-height font-family;
/* 示例 */
.shorthand {
font: italic bold 16px/1.5 Arial, sans-serif;
}
/* 至少需要 font-size 和 font-family */
.minimal {
font: 16px Arial, sans-serif;
}实战：页面字体配置
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.6rem; /* 16px */
line-height: 1.6;
color: #333;
}
h1 {
font-size: 3.2rem;
font-weight: 600;
line-height: 1.3;
margin: 0 0 1.6rem;
}
h2 {
font-size: 2.4rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 1.2rem;
}
p {
font-size: 1.6rem;
margin: 0 0 1.6rem;
}
small {
font-size: 1.4rem;
color: #888;
}
</style>
</head>
<body>
<h1>标题一（32px）</h1>
<h2>标题二（24px）</h2>
<p>正文内容（16px），行高 1.6，保证良好的阅读体验。</p>
<small>辅助文字（14px），颜色较浅。</small>
</body>
</html>字体属性速查
| 属性 | 作用 | 常用值 |
|---|---|---|
font-family | 字体族 | Arial, sans-serif |
font-size | 字号 | 16px, 1.6rem |
font-weight | 粗细 | normal, bold, 400, 700 |
font-style | 样式 | normal, italic |
line-height | 行高 | 1.6, 24px |
font | 简写 | italic bold 16px/1.5 Arial |
小结
- font-family 设置字体，多字体用逗号分隔，最后跟通用族
- font-size 推荐用 rem 单位，配合 html { font-size: 62.5% } 方便计算
- font-weight 用 400（正常）和 700（加粗）最保险
- line-height 正文设 1.5-1.8，标题设 1.2-1.4
- font 简写按 style weight size/line-height family 顺序