CSS 文本与字体
文字是网页内容的核心载体。通过 CSS，我们可以精确控制文字的字体、大小、颜色、间距、对齐方式等，让网页内容更易读、更美观。这一章将详细介绍 CSS 文本与字体相关的属性。
字体属性
font-family 字体族
font-family 指定元素的字体。由于不同设备安装的字体不同，通常需要指定多个备选字体：
body {
font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
字体列表从左到右依次尝试，浏览器使用第一个可用的字体。字体名称包含空格时需要加引号。
最后的 sans-serif 是通用字体族名称，当所有指定字体都不可用时，浏览器使用系统默认的无衬线字体。常见的通用字体族：
serif：衬线字体（如 Times New Roman）sans-serif：无衬线字体（如 Arial、Helvetica）monospace：等宽字体（如 Consolas、Courier New）cursive：手写字体fantasy：装饰字体
font-size 字体大小
font-size 设置文字大小，常用单位包括：
h1 { font-size: 32px; } /* 像素，固定大小 */
p { font-size: 16px; } /* 像素 */
small { font-size: 0.875em; } /* 相对于父元素字体大小 */
html { font-size: 100%; } /* 相对于浏览器默认大小 */
body { font-size: 1rem; } /* 相对于根元素字体大小 */
.title { font-size: 2vw; } /* 视口宽度的 2% */
em 和 rem 是相对单位，更适合响应式设计。em 相对于父元素的字体大小，rem 相对于根元素（<html>）的字体大小。
推荐的做法是在根元素设置基准大小，其他元素使用 rem：
html {
font-size: 16px; /* 基准大小 */
}
h1 { font-size: 2rem; } /* 32px */
h2 { font-size: 1.5rem; } /* 24px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */
也可以使用关键字设置字体大小：
p { font-size: medium; } /* 默认大小，约 16px */
h1 { font-size: xx-large; } /* 极大 */
small { font-size: small; } /* 小号 */
关键字包括：xx-small、x-small、small、medium、large、x-large、xx-large，以及 smaller 和 larger（相对于父元素）。
font-weight 字体粗细
font-weight 控制文字粗细：
p { font-weight: normal; } /* 正常，等于 400 */
strong { font-weight: bold; } /* 粗体，等于 700 */
h1 { font-weight: 600; } /* 半粗 */
.light { font-weight: 300; } /* 细体 */
数值范围从 100 到 900，以 100 为单位。常用值：400（normal）、700（bold）。字体是否支持特定粗细取决于字体文件本身，不支持时会寻找最接近的值。
font-style 字体样式
font-style 主要用于设置斜体：
em { font-style: italic; } /* 斜体 */
.normal { font-style: normal; } /* 正常 */
.oblique { font-style: oblique; } /* 倾斜 */
italic 使用字体的斜体版本，oblique 将正常字体倾斜显示。通常使用 italic。
font-variant 字体变体
font-variant 用于设置小型大写字母：
.abbr { font-variant: small-caps; }
小型大写字母将小写字母显示为缩小的大写字母形式，常用于缩写词。
font 简写属性
font 属性可以简写多个字体属性：
p {
font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
/* 等价于：
font-style: italic;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: "Microsoft YaHei", sans-serif;
*/
}
简写顺序为：font-style font-variant font-weight font-size/line-height font-family。font-size 和 font-family 是必需的，其他可以省略。
引入 Web 字体
使用 @font-face 可以引入自定义字体：
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2"),
url("myfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body {
font-family: "MyFont", sans-serif;
}
更常用的方式是使用 Google Fonts 等字体服务：
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: "Noto Sans SC", sans-serif;
}
使用 Web 字体时要注意性能影响，字体文件会增加页面加载时间。建议只引入需要的字重和字符集。
文本属性
color 文字颜色
color 设置文字颜色，支持多种格式：
h1 { color: red; } /* 颜色名 */
p { color: #333333; } /* 十六进制 */
a { color: #3498db; } /* 十六进制简写 */
.highlight { color: rgb(255, 100, 0); } /* RGB */
.overlay { color: rgba(255, 100, 0, 0.8); } /* RGBA，带透明度 */
.accent { color: hsl(200, 70%, 50%); } /* HSL */
.accent { color: hsla(200, 70%, 50%, 0.8); } /* HSLA */
十六进制是最常用的格式，RGB 和 HSL 提供更直观的颜色控制。HSL（色相、饱和度、亮度）对于调整颜色明暗特别方便，只需改变亮度值即可。
text-align 文本对齐
text-align 控制文本的水平对齐方式：
h1 { text-align: center; } /* 居中 */
p { text-align: left; } /* 左对齐（默认） */
.quote { text-align: right; } /* 右对齐 */
.article { text-align: justify; } /* 两端对齐 */
justify 两端对齐会让文字填满整行，最后一行除外。适合报纸杂志风格的排版。
text-decoration 文本装饰
text-decoration 添加装饰线：
a { text-decoration: none; } /* 无装饰 */
.underline { text-decoration: underline; } /* 下划线 */
.overline { text-decoration: overline; } /* 上划线 */
.strike { text-decoration: line-through; } /* 删除线 */
.multiple { text-decoration: underline line-through; } /* 多条线 */
/* 可以指定样式和颜色 */
.fancy {
text-decoration: underline wavy red;
}
text-transform 文本转换
text-transform 控制文本大小写：
.uppercase { text-transform: uppercase; } /* 全大写 */
.lowercase { text-transform: lowercase; } /* 全小写 */
.capitalize { text-transform: capitalize; } /* 首字母大写 */
.normal { text-transform: none; } /* 原样显示 */
capitalize 只让每个单词的首字母大写，不影响其他字母。
text-indent 文本缩进
text-indent 设置首行缩进：
p {
text-indent: 2em; /* 首行缩进两个字符 */
}
负值可以创建"悬挂缩进"，首行凸出：
p {
text-indent: -2em;
padding-left: 2em;
}
line-height 行高
line-height 设置行间距，即相邻两行基线之间的距离：
p { line-height: 1.6; } /* 无单位值，乘以字体大小 */
p { line-height: 1.6em; } /* 相对于字体大小 */
p { line-height: 26px; } /* 固定值 */
推荐使用无单位数值，这样子元素会继承比例值而不是固定值。
行高影响文本的可读性。正文中通常使用 1.5 到 1.8 的行高，标题可以使用较小的值。单行文本垂直居中可以用 line-height 等于容器高度实现：
.button {
height: 40px;
line-height: 40px;
text-align: center;
}
letter-spacing 字间距
letter-spacing 控制字符之间的间距：
.tight { letter-spacing: -0.5px; } /* 紧凑 */
.normal { letter-spacing: normal; } /* 正常 */
.loose { letter-spacing: 2px; } /* 宽松 */
h1 { letter-spacing: 0.1em; } /* 标题字符间距 */
word-spacing 词间距
word-spacing 控制单词之间的间距：
.loose { word-spacing: 10px; }
对于中文，词间距不起作用，因为中文不像英文那样以空格分隔单词。
word-break 换行规则
word-break 控制文本换行行为：
.normal { word-break: normal; } /* 默认换行规则 */
.break { word-break: break-all; } /* 允许在任意字符间换行 */
.keep { word-break: keep-all; } /* 不允许在词中间换行 */
对于中文，break-all 允许在任意汉字处换行，keep-all 只在标点或空格处换行。
overflow-wrap 溢出换行
overflow-wrap（原 word-wrap）控制长单词或 URL 的换行：
p {
overflow-wrap: break-word; /* 长单词在必要时换行 */
}
当长单词或 URL 超出容器宽度时，break-word 允许在任意位置断开换行。
white-space 空白处理
white-space 控制空白字符和换行的处理：
p { white-space: normal; } /* 合并空白，自动换行（默认） */
p { white-space: nowrap; } /* 合并空白，不换行 */
pre { white-space: pre; } /* 保留空白，保留换行 */
pre { white-space: pre-wrap; } /* 保留空白，自动换行 */
pre { white-space: pre-line; } /* 合并空白，保留换行 */
nowrap 常用于防止元素换行，pre-wrap 用于保留代码格式同时允许自动换行。
text-overflow 文本溢出
text-overflow 控制文本溢出时的显示方式：
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */
}
.clip {
white-space: nowrap;
overflow: hidden;
text-overflow: clip; /* 直接截断 */
}
text-overflow 需要配合 overflow: hidden 和 white-space: nowrap 使用。
多行文本截断需要使用 -webkit-line-clamp：
.multi-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示 3 行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
text-shadow 文字阴影
text-shadow 为文字添加阴影效果：
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/* 格式：水平偏移 垂直偏移 模糊半径 颜色 */
}
/* 多层阴影 */
.multi-shadow {
text-shadow:
1px 1px 0 #fff,
2px 2px 0 #333;
}
/* 发光效果 */
.glow {
text-shadow: 0 0 10px currentColor;
}
writing-mode 书写模式
writing-mode 控制文本的书写方向：
.vertical {
writing-mode: vertical-rl; /* 垂直从右到左（传统中文） */
}
.vertical-lr {
writing-mode: vertical-lr; /* 垂直从左到右 */
}
.horizontal {
writing-mode: horizontal-tb; /* 水平从上到下（默认） */
}
垂直排版在中文书法风格网站或诗歌展示中常用。
列表样式
列表相关的样式属性：
ul {
list-style-type: disc; /* 实心圆（默认） */
list-style-type: circle; /* 空心圆 */
list-style-type: square; /* 实心方块 */
list-style-type: none; /* 无标记 */
list-style-position: inside; /* 标记在内容区内 */
list-style-position: outside; /* 标记在内容区外（默认） */
list-style-image: url('bullet.png'); /* 自定义标记图片 */
}
ol {
list-style-type: decimal; /* 数字（默认） */
list-style-type: upper-roman; /* 大写罗马数字 */
list-style-type: lower-alpha; /* 小写字母 */
}
/* 简写 */
ul {
list-style: disc inside;
}
自定义列表标记通常使用 list-style: none 配合 ::before 伪元素：
ul {
list-style: none;
padding-left: 0;
}
li {
position: relative;
padding-left: 20px;
}
li::before {
content: "→";
position: absolute;
left: 0;
color: #3498db;
}
小结
这一章我们学习了：
- 字体属性：font-family、font-size、font-weight、font-style、font-variant
- 引入 Web 字体的方法
- 文本属性：color、text-align、text-decoration、text-transform、line-height 等
- 文本溢出处理和文字阴影
- 列表样式定制
文字排版是网页设计的基础，良好的排版能显著提升内容的可读性。记住以下几点：
- 正文行高在 1.5-1.8 之间最易读
- 使用相对单位（rem、em）保持响应式
- 避免行过长，控制在 45-75 个字符最佳
- 使用适当的对比度确保可读性
下一章我们将学习 CSS 背景与边框，为元素添加更多视觉效果。