第四章：精通文本样式：字体、排版与装饰

第四章：精通文本样式：字体、排版与装饰

摘要: 在之前的章节中，我们已经为了完成布局和交互案例，初步使用了一些基础的文本与字体属性。本章将对这些属性进行一次系统性的、深入的讲解。我们将从基础的 font-family、font-size 开始，学习如何为网页设定统一且美观的视觉基调；然后，我们会掌握 text-align、line-height 等排版工具，优化用户的阅读体验。最重要的是，本章将引入实战模块，指导您将在第三章学到的高级选择器知识，应用于构建自定义按钮、美化文章列表等常见网页组件。

在本章的学习地图中，我们将：

  1. 首先，深入 字体属性 (font)，掌握设定网页视觉基调的工具。
  2. 接着，探索 文本属性 (text)，学会精细化地优化段落的阅读体验。
  3. 然后，学习一些 进阶文本控制 技巧，解决文本溢出和垂直对齐等常见问题。
  4. 最后，在 实战环节 中，将所有理论知识融会贯通，亲手打造实用的网页组件。

4.1. 字体属性 (font)：奠定视觉基调

字体是网页设计的灵魂。合适的字体属性不仅关乎美观，更直接影响内容的可读性和用户体验。

4.1.1. font-family：指定字体

font-family 属性用于设置文本的字体。由于我们无法保证用户的电脑上安装了我们想要的所有字体，最佳实践是提供一个备选列表，也就是“字体栈”。

痛点背景: 你精心设计了一个使用小众字体的网站，但在用户的电脑上却因为缺少该字体而显示为普通的宋体，完全破坏了设计感。

解决方案: 提供一个优雅降级的字体列表。浏览器会从左到右依次尝试，直到找到第一个可用的字体。列表最后通常会以一个通用的字体族（如 sans-serif）结尾，确保最坏情况下也能显示正确的字体风格。

1
2
3
4
5
6
7
8
9
10
11
.serif-text {
  /* 优先使用 Georgia，如果没有，则使用 Times New Roman，
     如果还没有，则使用系统默认的任何一种衬线字体 */
  font-family: Georgia, "Times New Roman", serif;
}

.sans-serif-text {
  /* 优先使用 Helvetica，如果没有，则使用 Arial，
     如果还没有，则使用系统默认的任何一种无衬线字体 */
  font-family: Helvetica, Arial, sans-serif;
}

当字体名称包含空格时（如 “Times New Roman”），必须用引号将其包裹起来。

4.1.2. font-size：控制大小

font-size 用于设置字体大小。在第一章我们已经接触过单位，这里我们重点对比其实际应用。

  • px: 像素，绝对单位，大小固定，适合需要精确控制的场景。
  • em: 相对单位，相对于 父元素 的字体大小。1.2em 表示父元素字体大小的 1.2 倍。
  • rem: (推荐) 相对单位，只相对于 根元素 (<html>) 的字体大小。这使得它在响应式设计中极易管理，只需调整根字号，整个页面的元素就能等比缩放。

比如在做网页适配不同屏幕大小时，用 rem 就很方便。假设在 html 根元素设置 font-size: 16px，那么页面中 1rem 就相当于 16px，2rem 就是 32px。如果要做一个适配手机和平板的网页，当平板屏幕更宽时，把 html 的 font-size 调整为 20px，那么原本设置为 1rem 的元素尺寸就会从 16px 变为 20px，其他以 rem 为单位的元素也会相应等比例变化，这样就能快速实现整体布局和字体大小的响应式调整。

4.1.3. font-weight：控制粗细

font-weight 用于设置字体的粗细。可以使用关键字或数字值。

  • 关键字: normal (默认值，等同于 400)，bold (粗体，等同于 700)。
  • 数字值: 从 100 (最细) 到 900 (最粗)，以 100 为步长。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Demo</title>
</head>
<body>
    <p style="font-weight: 100;">Font Weight 100</p>
    <p style="font-weight: 200;">Font Weight 200</p>
    <p style="font-weight: 300;">Font Weight 300</p>
    <p style="font-weight: 400;">Font Weight 400 (normal)</p>
    <p style="font-weight: 500;">Font Weight 500</p>
    <p style="font-weight: 600;">Font Weight 600</p>
    <p style="font-weight: 700;">Font Weight 700 (bold)</p>
    <p style="font-weight: 800;">Font Weight 800</p>
    <p style="font-weight: 900;">Font Weight 900</p>
</body>
</html>

4.1.4. font-style：控制样式

font-style 主要用于设置文本是否倾斜。

  • normal: 正常显示。
  • italic: 以斜体显示。
1
2
<p style="font-style:normal;">Font Style Normal</p>
<p style="font-style:italic;">Font Style Italic</p>

4.1.5. line-height：控制行高

line-height 定义了每行文本所占据的垂直空间，是排版中至关重要的属性。文字在行高所定义的空间内是 垂直居中 的。

经典技巧：单行文本垂直居中
当一个块级元素的 height 和 line-height 设置为相同的值时，其中的单行文本就能实现完美的垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .header-bar {
        height: 60px;
        background-color: #2c3e50;
        color: white;
        
        /* 关键：让行高等于高度 */
        line-height: 60px;
    }
</style>

<div class="header-bar">
    这是一个高度为 60px 的导航栏，文字垂直居中。
</div>

4.1.6. font (简写属性)

为了简化代码，我们可以使用 font 简写属性。顺序非常重要，至少需要指定 font-size 和 font-family。

这个在开发中会比较少用一点，且阅读性较差，毕竟 font-weight 类似于这样的属性他的语义化更为清晰

语法: font: font-style font-weight font-size/line-height font-family;

1
2
3
4
5
6
7
8
9
10
11
12
13
p {
  /* 正常写法 */
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

/* 等价的简写形式 */
p {
  font: italic bold 16px/1.5 Arial, sans-serif;
}

4.2. 文本属性 (text)：优化阅读体验

这类属性用于控制文本段落的整体外观和布局。

  • color: 设置文字颜色。
  • text-align: 设置块内文本的 水平对齐 方式。可选值有 left, right, center, justify (两端对齐)。
  • text-decoration: 添加或移除文本装饰。none (无装饰) 常用于移除 <a> 标签的默认下划线；underline (下划线)；line-through (删除线)。
  • text-indent: 设置块内文本的 首行缩进。text-indent: 2em; 是一个经典设置，表示缩进两个当前字体的宽度。
  • letter-spacing / word-spacing: 分别用于微调 字符之间 和 单词之间 的间距。

没指定单位时，line-height 默认是以当前元素 font-size 为基准的倍数，1.6 就表示行高是字体大小的 1.6 倍。这样设置在继承时更灵活，子元素会用自身字体大小乘以这个倍数来计算行高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .article p {
        color: #333;
        line-height: 1.6;
    }
    .article p.intro {
        text-align: justify;
        text-indent: 2em;
        letter-spacing: 0.5px;
    }
    .article a {
        text-decoration: none;
        color: #3498db;
    }
</style>

<div class="article">
    <p class="intro">
        这是一个段落，用于演示文本样式。它实现了首行缩进两个字符，并且文字两端对齐，字符间距也略有增加，以提升阅读体验。段落中有一个<a href="#">超链接</a>，它的下划线已被移除。
    </p>
</div>

4.3. 进阶文本控制

4.3.1. 文本溢出处理

痛点背景: 当一段很长的文本（如文章标题）被放进一个固定宽度的容器时，如果文本不换行，就会溢出容器，破坏布局。

解决方案: 使用“三件套”实现经典的“文本溢出显示省略号 (...)”效果。

  1. white-space: nowrap;: 强制文本在同一行显示，不自动换行。
  2. overflow: hidden;: 隐藏超出容器宽度的部分。
  3. text-overflow: ellipsis;: 将被隐藏的部分用省略号代替。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    .title-box {
        width: 250px;
        border: 1px solid #ccc;
        padding: 10px;
        
        /* --- 文本溢出处理三件套 --- */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<div class="title-box">
    这是一个非常非常非常长的标题，它会被截断并显示省略号。
</div>

4.3.2. vertical-align：垂直对齐

这是一个非常容易被误解的属性。

核心要点: vertical-align 只作用于 行内元素 (inline) 和行内块元素 (inline-block)。它控制的是一个元素相对于它所在的 那一行 的基线 (baseline) 的对齐方式，而不是用于块级元素的垂直居中。

痛点背景: 你想让一张小图标和旁边的文字在垂直方向上对齐。

解决方案: 使用 vertical-align: middle;。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .icon {
        width: 24px;
        height: 24px;
        background-color: #3498db;
        display: inline-block; /* 确保是行内块元素 */
        
        /* 关键：让图标和文字的中线对齐 */
        vertical-align: middle;
    }
    .label-text {
        font-size: 20px;
        line-height: 24px; /* 让行高和图标高度一致，效果更佳 */
    }
</style>

<div>
    <span class="icon"></span>
    <span class="label-text">图标与文字对齐</span>
</div>

4.4. 实战：样式化常见元素

现在，我们将综合运用本章以及第三章的知识，完成两个常见的实战任务。

4.4.1. 实战一：从链接到按钮

任务: 将一个普通的 <a> 标签，通过 CSS 样式化为一个具有背景色、圆角、悬停效果的现代化按钮。

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
<style>
    .custom-btn {
        /* 1. 改变显示模式，使其能设置内外边距 */
        display: inline-block;

        /* 2. 外观样式 */
        background-color: #2ecc71;
        color: white;
        padding: 12px 24px;
        border-radius: 5px;
        
        /* 3. 文本样式 */
        font-weight: bold;
        text-decoration: none;
        
        /* 4. 添加平滑过渡效果 */
        transition: background-color 0.3s;
    }

    /* 5. 使用 :hover 伪类实现交互 */
    .custom-btn:hover {
        background-color: #27ae60;
    }
</style>

<a href="#" class="custom-btn">注册新账号</a>

4.4.2. 实战二：美化文章列表

任务: 去除 <ul> 的默认项目符号，并为其添加自定义的图标作为新的项目符号。

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
<style>
    .feature-list {
        list-style: none; /* 1. 去掉默认的小黑点 */
        padding-left: 0;
    }
    .feature-list li {
        padding-left: 30px; /* 2. 为伪元素留出空间 */
        position: relative; /* 3. 作为伪元素的定位参考 */
        line-height: 1.6;
        margin-bottom: 10px;
    }

    /* 4. 使用 ::before 伪元素创建自定义项目符号 */
    .feature-list li::before {
        content: "✔"; /* 5. 设置内容为一个对勾符号 */
        color: #2ecc71;
        font-weight: bold;
        font-size: 20px;

        /* 6. 绝对定位，精确控制位置 */
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<ul class="feature-list">
    <li>掌握核心字体属性</li>
    <li>优化文本排版布局</li>
    <li>实战构建网页组件</li>
</ul>

4.5. 本章核心速查总结

分类关键项核心描述
字体font-family设置字体栈，以通用字体族结尾，如 sans-serif。
font-size(推荐) 使用 rem 单位，便于实现整站响应式缩放。
line-height控制行高，可通过 height: value; line-height: value; 实现单行垂直居中。
font简写属性，顺序: style weight size/line-height family。
文本text-align控制块内文本 水平 对齐。
text-decorationnone 常用于移除链接下划线。
text-overflowellipsis 配合 overflow:hidden 和 white-space:nowrap 实现溢出省略号。
对齐vertical-align(仅限行内/行内块) 控制元素在 行内 的垂直对齐。

4.6. 疑难解答

学习问答
2025-08-25
我

Prorise，我有点搞不懂 em 和 rem，它们好像都是相对单位，什么时候该用哪个呢？

P
Prorise

问得好！这是初学者最容易混淆的地方。em 是相对于它的父元素，如果层层嵌套，计算起来就会像套娃一样，很麻烦。

P
Prorise

而 rem 只跟根元素 <html> 挂钩。所以你只要改一个地方，整个页面的元素大小都能“听话”地一起缩放，做响应式设计时特别方便。所以，记住一句话：做项目，优先用 rem。

我

我看到一个技巧说把 height 和 line-height 设置成一样的值，文字就垂直居中了，这是什么原理？

P
Prorise

对的，这是个很经典的方法。你可以把 line-height 想象成每一行文字被包裹在一个“隐形”的盒子里，文字本身在这个盒子里面是垂直居中的。当你把这个“隐形盒子”的高度（line-height）撑得和外部容器的 height 一样高时，文字自然也就居中了。不过要记住，这个方法只对单行文本有效。

我

那 vertical-align 呢？我试了 vertical-align: middle 想让一个 div 居中，但完全没反应。

P
Prorise

这是另一个常见陷阱！vertical-align 是个“内联世界的规则”，它只对 inline 或 inline-block 元素起作用，用来调整它们在同一行文字里的对齐位置。而 div 默认是块级元素，自己就占了一整行，没有可以相对齐的“邻居”，所以 vertical-align 对它无效。要让块级元素垂直居中，我们需要动用更强大的布局工具，比如我们后面要学的 Flexbox。