CSS文本样式详解

什么是CSS文本样式？

CSS文本样式用于控制网页中文字的外观，包括字体、颜色、对齐方式、行高、间距等。它们是网页设计中最基础也是最重要的部分之一，直接影响页面的可读性和视觉效果。

文本样式分类

CSS文本样式主要分为两大类：

  1. 字体样式：控制文字本身的外观，如字体、大小、粗细、颜色等
  2. 文本布局：控制文字在页面中的排列方式，如对齐、行高、间距等

1. 字体样式

1.1 字体颜色（color）

语法：color: 值;

取值方式：

  • 关键字：如 red、green、blue、pink 等
  • 十六进制值：如 #ff0000（红色）、#00ff00（绿色）、#0000ff（蓝色）
  • RGB值：如 rgb(255, 0, 0)（红色）
  • RGBA值：如 rgba(255, 0, 0, 0.5)（半透明红色）

示例：

1
2
3
4
5
6
7
8
9
10
11
p {
  color: #333; /* 深灰色 */
}

a {
  color: #0066cc; /* 蓝色链接 */
}

.warning {
  color: rgba(255, 0, 0, 0.8); /* 半透明红色警告 */
}

1.2 字体族（font-family）

语法：font-family: 字体1, 字体2, ..., 通用字体族;

作用：指定元素使用的字体，浏览器会按照列表顺序查找可用字体

常见字体族：

  • 无衬线字体：Arial, Helvetica, sans-serif
  • 衬线字体：Times New Roman, Georgia, serif
  • 等宽字体：Courier New, monospace

示例：

1
2
3
4
5
6
7
body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", sans-serif;
}

code {
  font-family: Consolas, "Courier New", monospace;
}

最佳实践：

  • 提供多个备选字体，以确保在不同系统上都能正常显示
  • 最后指定一个通用字体族，作为最后的 fallback
  • 对于中文字体，建议包含常用的中文字体，如微软雅黑、黑体等

1.3 字体大小（font-size）

语法：font-size: 值;

常用单位：

  • 像素（px）：固定单位，最常用
  • 百分比（%）：相对于父元素的字体大小
  • em：相对于父元素的字体大小
  • rem：相对于根元素（html）的字体大小
  • vw/vh：相对于视口宽度/高度的百分比

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html {
  font-size: 16px; /* 设置根字体大小 */
}

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

p {
  font-size: 1.125rem; /* 18px */
}

.small-text {
  font-size: 0.875rem; /* 14px */
}

1.4 字体风格（font-style）

语法：font-style: normal | italic | oblique;

取值说明：

  • normal：默认值，正常字体
  • italic：斜体，使用字体本身的斜体版本
  • oblique：倾斜，将正常字体倾斜显示

示例：

1
2
3
4
5
6
7
.italic-text {
  font-style: italic;
}

.quote {
  font-style: oblique;
}

1.5 字体粗细（font-weight）

语法：font-weight: 值;

取值说明：

  • 关键字：normal（400）、bold（700）、bolder、lighter
  • 数值：100, 200, 300, 400, 500, 600, 700, 800, 900

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
  font-weight: normal; /* 400 */
}

h1 {
  font-weight: 700; /* bold */
}

.heavy-text {
  font-weight: 800;
}

.light-text {
  font-weight: 300;
}

1.6 字体装饰（text-decoration）

语法：text-decoration: 值;

取值说明：

  • none：默认值，无装饰
  • underline：下划线
  • overline：上划线
  • line-through：删除线
  • blink：闪烁效果（已废弃）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a {
  text-decoration: none; /* 移除链接下划线 */
}

a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.del {
  text-decoration: line-through; /* 删除线 */
}

.underline {
  text-decoration: underline wavy #ff0000; /* 波浪形红色下划线 */
}

1.7 字体简写（font）

语法：font: 风格 粗细 大小/行高 字体族;

示例：

1
2
3
4
5
6
7
body {
  font: normal 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font: bold 32px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

注意事项：

  • 简写属性中必须包含 font-size 和 font-family
  • line-height 可选，通过 / 跟在 font-size 后面
  • 其他属性（风格、粗细）可选

2. 文本布局

2.1 文本对齐（text-align）

语法：text-align: left | right | center | justify;

取值说明：

  • left：左对齐（默认）
  • right：右对齐
  • center：居中对齐
  • justify：两端对齐

示例：

1
2
3
4
5
6
7
8
9
10
11
h1 {
  text-align: center;
}

.article {
  text-align: justify;
}

.footer {
  text-align: right;
}

2.2 行高（line-height）

语法：line-height: 值;

取值方式：

  • 数值：如 1.5，表示字体大小的1.5倍
  • 像素：如 24px
  • 百分比：如 150%

作用：控制行与行之间的距离，影响文本的可读性

示例：

1
2
3
4
5
6
7
8
9
10
11
body {
  line-height: 1.6; /* 推荐的行高，提高可读性 */
}

p {
  line-height: 24px; /* 固定行高 */
}

h1 {
  line-height: 1.2; /* 标题行高较小 */
}

最佳实践：

  • 正文文本推荐使用 1.5-1.8 的行高
  • 标题行高可适当减小，一般 1.2-1.4
  • 使用无单位数值（如1.5）比固定像素更灵活

2.3 字间距（letter-spacing）

语法：letter-spacing: 值;

作用：控制字符之间的间距

示例：

1
2
3
4
5
6
7
.title {
  letter-spacing: 2px; /* 增加标题字间距 */
}

.small-text {
  letter-spacing: -0.5px; /* 减小小字间距，提高可读性 */
}

2.4 词间距（word-spacing）

语法：word-spacing: 值;

作用：控制单词之间的间距（主要用于英文文本）

示例：

1
2
3
.english-text {
  word-spacing: 3px; /* 增加英文单词间距 */
}

2.5 首行缩进（text-indent）

语法：text-indent: 值;

作用：控制段落首行的缩进

示例：

1
2
3
.article p {
  text-indent: 2em; /* 首行缩进2个字符宽度 */
}

2.6 文本转换（text-transform）

语法：text-transform: none | uppercase | lowercase | capitalize;

取值说明：

  • none：默认值，不转换
  • uppercase：转换为大写
  • lowercase：转换为小写
  • capitalize：首字母大写

示例：

1
2
3
4
5
6
7
8
9
10
11
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

2.7 文本阴影（text-shadow）

语法：text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

作用：为文本添加阴影效果

示例：

1
2
3
4
5
6
7
.title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 标准阴影 */
}

.glow {
  text-shadow: 0 0 10px #ff0000; /* 发光效果 */
}

2.8 文本溢出处理

语法：

1
2
3
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */

作用：控制文本溢出时的显示方式

示例：

1
2
3
4
5
6
.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 实际应用案例

案例1：文章页面样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<article class="article">
  <h1>CSS文本样式详解</h1>
  <p class="meta">发布于 2025-12-07 | 作者：前端君</p>
  
  <h2>1. 字体样式</h2>
  <p>CSS字体样式用于控制文字的外观，包括颜色、字体、大小等...</p>
  
  <h2>2. 文本布局</h2>
  <p>文本布局样式控制文字在页面中的排列方式，如对齐、行高、间距等...</p>
  
  <blockquote class="quote">
    <p>"好的排版可以让内容自己说话。"</p>
  </blockquote>
</article>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.article {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
  color: #333;
  line-height: 1.8;
}

.article h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 700;
}

.article .meta {
  text-align: center;
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 30px;
}

.article h2 {
  font-size: 1.8rem;
  color: #34495e;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

.article p {
  margin-bottom: 20px;
  text-align: justify;
}

.article .quote {
  margin: 30px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-left: 4px solid #3498db;
  font-style: italic;
  color: #555;
}

案例2：导航菜单样式

1
2
3
4
5
6
7
8
<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
    <li class="nav-item"><a href="#" class="nav-link">关于我们</a></li>
    <li class="nav-item"><a href="#" class="nav-link">产品中心</a></li>
    <li class="nav-item"><a href="#" class="nav-link">联系我们</a></li>
  </ul>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.nav {
  background-color: #2c3e50;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  margin-right: 10px;
}

.nav-link {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: #3498db;
  color: #fff;
}

.nav-link.active {
  background-color: #3498db;
  color: #fff;
}

4. 文本样式最佳实践

  1. 保持一致性：网站整体字体风格、大小、颜色应保持一致
  2. 注重可读性：
    • 正文行高推荐1.5-1.8
    • 字体大小不小于16px
    • 颜色对比度足够（文字与背景）
  3. 合理使用字体：
    • 标题可使用粗体或较大字号
    • 正文使用清晰易读的字体
    • 避免使用过多不同字体
  4. 响应式设计：
    • 使用相对单位（rem, em）而非固定像素
    • 不同屏幕尺寸下调整字体大小和行高
  5. 优化性能：
    • 限制字体数量和大小
    • 使用系统字体或优化的Web字体
    • 考虑字体加载策略

5. 总结

核心要点

  • CSS文本样式分为字体样式和文本布局两大类
  • 字体样式控制文字本身的外观，包括颜色、字体、大小、粗细等
  • 文本布局控制文字在页面中的排列方式，包括对齐、行高、间距等
  • font 简写属性可以同时设置多个字体相关属性
  • 响应式设计中推荐使用相对单位（rem/em）

重要知识点

分类 关键属性 作用
字体样式 color 控制文字颜色
font-family 指定字体族
font-size 设置字体大小
font-weight 控制字体粗细
文本布局 text-align 控制文本对齐方式
line-height 控制行间距
letter-spacing 控制字符间距
text-indent 设置首行缩进
文本效果 text-shadow 添加文本阴影
text-decoration 设置文本装饰线
text-overflow 处理文本溢出

最佳实践

  1. 保持网站字体风格的一致性
  2. 正文行高推荐1.5-1.8，提高可读性
  3. 字体大小不小于16px
  4. 使用相对单位实现响应式文本
  5. 合理使用字体数量，避免过多不同字体
  6. 考虑字体加载性能，优化Web字体使用

课后练习

  1. 创建一个简单的文章页面，设置合理的字体、行高、颜色等样式
  2. 设计一个导航菜单，使用文本样式增强交互效果
  3. 尝试使用不同的文本对齐方式和行高，观察它们对可读性的影响
  4. 练习使用文本阴影和装饰效果，为页面添加视觉亮点
  5. 实现响应式文本设计，在不同屏幕尺寸下保持良好的可读性

通过练习，你将更深入地理解CSS文本样式的使用方法和最佳实践，为创建优秀的网页设计打下坚实的基础。