CSS: CSS 文本与字体
最后更新：2026-10-13
网页中最主要的内容就是文本。CSS 提供了丰富的属性来控制文本的字体、大小、颜色、间距和对齐方式。
✅ 字体栈顺序：
font-family 应该从最具体的字体写到最通用的类别，例如 font-family: "Microsoft YaHei", "PingFang SC", sans-serif;。浏览器会从前到后尝试加载，直到找到可用的字体。CSS 提供了丰富的属性来控制文本的字体、大小、颜色、间距和对齐方式。
1. 字体属性
(1) 字体属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
font-family |
"Microsoft YaHei", Arial, sans-serif |
设置字体（可写多个备选） |
font-size |
16px, 1.2em, 1rem, 100% |
字体大小 |
font-weight |
normal(400), bold(700), 100~900 |
字体粗细 |
font-style |
normal, italic, oblique |
字体样式（斜体/正常） |
line-height |
1.5(无单位), 24px, 150% |
行高（推荐正文1.5~1.8） |
font |
italic bold 16px/1.8 sans-serif |
简写属性，可同时设置多个 |
(2) 字体属性详解
(3) font-family（字体）
设置文本的字体。可以指定多个字体作为备选：
▶ 示例
▶ 试一试浏览器会从左到右依次尝试使用字体，如果第一个字体不存在，则尝试下一个，以此类推。
(4) font-size（字体大小）
▶ 示例
▶ 试一试常用单位：px（像素）、em（相对自身字体）、rem（相对根元素字体）、%（百分比）
(5) font-weight（字体粗细）
▶ 示例
▶ 试一试(6) font-style（字体样式）
▶ 示例
▶ 试一试(7) line-height（行高）
控制行与行之间的间距，对阅读体验影响很大：
▶ 示例
▶ 试一试一般正文的 line-height 建议在 1.5 到 1.8 之间，阅读最舒适。
(8) font 简写属性
font 可以同时设置多个字体属性：
▶ 示例
▶ 试一试顺序：font-style font-weight font-size/line-height font-family
注意：font-size 和 font-family 是必需的，缺少它们整个声明会无效。
(9) @font-face 自定义字体
可以使用 @font-face 加载网页中的自定义字体（非系统自带）：
▶ 示例
▶ 试一试字体文件路径说明：
- 推荐使用 WebP 格式的字体文件（
.woff2），体积更小 - 路径使用绝对路径
/assets/fonts/，确保多语言版本都能正确引用 - 旧版字体格式（
.ttf、.eot）仅用于兼容旧浏览器
注意字体版权：使用自定义字体时请确保拥有合法授权，优先选择开源字体。
2. 文本外观属性
(1) 文本属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
color |
#333, red, rgb(255,0,0), rgba(0,0,0,0.5) |
文本颜色 |
text-align |
left, center, right, justify |
文本水平对齐方式 |
text-decoration |
none, underline, overline, line-through |
文本装饰线 |
text-indent |
2em, 32px |
首行缩进 |
text-transform |
none, uppercase, lowercase, capitalize |
文本大小写转换 |
text-shadow |
2px 2px 4px rgba(0,0,0,0.5) |
文本阴影（偏移+模糊+颜色） |
letter-spacing |
2px, -1px, 0.1em |
字符间距 |
word-spacing |
4px, 0.5em |
单词间距 |
white-space |
normal, nowrap, pre, pre-wrap |
空白字符和换行处理 |
text-overflow |
clip, ellipsis |
文本溢出显示方式（需配合 overflow: hidden） |
(2) color（文本颜色）
设置文本的颜色：
▶ 示例
▶ 试一试(3) text-align（文本对齐）
▶ 示例
▶ 试一试(4) text-decoration（文本装饰）
▶ 示例
▶ 试一试(5) text-indent（文本缩进）
段落首行缩进常用：
▶ 示例
▶ 试一试(6) letter-spacing（字符间距）
▶ 示例
▶ 试一试(7) text-shadow（文本阴影）
⚠️ 可读性提醒： 文字阴影（text-shadow）虽然好看，但过度使用会降低可读性。深色背景配深色阴影完全看不清——确保文字和背景有足够对比度才是首要任务。
▶ 示例
▶ 试一试(8) white-space（空白处理）
▶ 示例
▶ 试一试(9) text-overflow（文本溢出）
配合 overflow 和 white-space 使用，处理文本溢出容器的场景：
▶ 示例
▶ 试一试3. 综合示例
▶ 示例
▶ 试一试❓ 常见问题
Q 中文字体怎么设置字体栈？
A 推荐顺序：
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;。Mac 用苹方（PingFang SC），Windows 用微软雅黑，然后回退到 Noto Sans 或系统无衬线字体。Q 加载 Google Fonts 会影响速度吗？
A 会。Google Fonts 需要额外发起网络请求。建议只加载需要的字重（不要一次性加载 300/400/500/700 全部），并且加上
display=swap 参数让浏览器先用后备字体渲染，等自定义字体加载完成后再替换。📖 小节
- 文本是网页内容的主体，CSS 的字体和文本属性可以让你精确控制每一个字符的外观
- 从字体选择、大小粗细，到行高、对齐、缩进和阴影，合理搭配这些属性能让文章的阅读体验大大提升
- 记住正文行高推荐 1.5-1.8，首行缩进用
text-indent: 2em，文本溢出用text-overflow: ellipsis
📝 作业
- 创建一个文章阅读页面，包含标题、副标题、正文段落。使用不同的字体、字号和颜色区分层级。
- 在页面中演示
text-decoration的至少 4 种效果（下划线、上划线、删除线、波浪线）。 - 实现"单行文本溢出显示省略号"的效果——在固定宽度的容器中显示一段长文本，超出部分用
...表示。 - 使用
text-shadow给标题添加一个发光效果。
