网站
引入
网页中的文字不只是显示内容，还会影响阅读体验。
CSS 字体排印主要用来控制文字的字体、大小、粗细、行距、对齐、间距和装饰效果。
正文
定义
定义
CSS 字体排印用于控制网页文字的显示效果，让文字更清晰、更有层次，也更适合阅读。
字体排印可以分成两类：
- 字体相关：控制文字本身长什么样
- 文本排版相关：控制文字怎么排列
例如 font-size 控制文字大小，line-height 控制行高，text-align 控制文本对齐方式。
基础语法
选择器 {
字体属性: 属性值;
文本属性: 属性值;
}例如：
p {
font-size: 16px;
line-height: 1.6;
color: #333333;
}这里的 font-size 控制文字大小，line-height 控制行高，color 控制文字颜色。
常见字体属性
| 属性 | 作用 |
|---|---|
font-family | 设置字体类型 |
font-size | 设置文字大小 |
font-weight | 设置文字粗细 |
font-style | 设置文字样式，例如斜体 |
line-height | 设置行高 |
font | 字体相关属性的简写 |
常见文本属性
| 属性 | 作用 |
|---|---|
color | 设置文字颜色 |
text-align | 设置文本水平对齐方式 |
text-decoration | 设置文本装饰线 |
text-indent | 设置首行缩进 |
letter-spacing | 设置字符间距 |
word-spacing | 设置单词间距 |
text-transform | 控制英文大小写转换 |
white-space | 控制空白和换行的处理方式 |
font-family
font-family 用于设置字体。
body {
font-family: Arial, "Microsoft YaHei", sans-serif;
}浏览器会从左到右查找字体。
如果用户电脑里没有 Arial，就尝试使用 Microsoft YaHei。
如果前面的字体都没有，就使用最后的通用字体 sans-serif。
常见通用字体族：
serif：衬线字体，笔画末端有装饰sans-serif：无衬线字体，常用于网页正文monospace：等宽字体，常用于代码cursive：手写风格字体fantasy：装饰风格字体
font-size
font-size 用于设置文字大小。
p {
font-size: 16px;
}常见单位：
px：固定像素，比较直观em：相对于当前元素的字体大小rem：相对于根元素<html>的字体大小%：相对于父元素字体大小
网页正文常见大小是 14px 到 18px。
初学时可以先用 px 理解大小，后面做响应式页面时再更多使用 rem。
font-weight
font-weight 用于设置文字粗细。
h1 {
font-weight: bold;
}
.desc {
font-weight: 400;
}常见值：
| 值 | 说明 |
|---|---|
normal | 正常粗细，通常等于 400 |
bold | 加粗，通常等于 700 |
100 到 900 | 数值越大越粗 |
不是所有字体都支持完整的 100 到 900。
如果字体本身没有对应粗细，浏览器可能会用相近效果模拟。
font-style
font-style 常用于设置斜体。
em {
font-style: italic;
}常见值：
normal：正常样式italic：斜体oblique：倾斜显示
<em> 默认通常就是斜体，但可以通过 CSS 改掉。
line-height
line-height 用于设置行高，也就是一行文字占据的高度。
p {
line-height: 1.6;
}line-height 对阅读体验很重要。
行高太小，文字会显得拥挤；行高太大，段落会显得松散。
常见写法：
body {
font-size: 16px;
line-height: 1.6;
}line-height: 1.6; 表示行高是当前字体大小的 1.6 倍。
这种不带单位的写法比较常见，也更适合继承。
text-align
text-align 用于设置文本的水平对齐方式。
.title {
text-align: center;
}常见值：
| 值 | 说明 |
|---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
text-align 不只影响普通文字，也会影响元素内部的内联内容。
例如 <img> 如果是内联表现，也可能受到父元素 text-align: center; 的影响。
text-decoration
text-decoration 用于设置文字装饰线。
a {
text-decoration: none;
}常见值：
| 值 | 说明 |
|---|---|
none | 没有装饰线 |
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
链接 <a> 默认通常有下划线。
如果去掉下划线，要注意链接是否还能被用户明显看出来。
text-indent
text-indent 用于设置段落首行缩进。
p {
text-indent: 2em;
}2em 可以理解为缩进两个当前文字大小的宽度。
中文文章中，段落首行缩进常用 2em。
letter-spacing 和 word-spacing
letter-spacing 用于设置字符间距。
word-spacing 用于设置单词间距。
.logo {
letter-spacing: 4px;
}
.english-text {
word-spacing: 8px;
}letter-spacing 常用于标题、按钮、品牌文字等场景。
中文里更常用 letter-spacing，英文段落里 word-spacing 更容易看出效果。
text-transform
text-transform 用于控制英文大小写显示。
.nav {
text-transform: uppercase;
}常见值：
| 值 | 作用 |
|---|---|
uppercase | 全部大写 |
lowercase | 全部小写 |
capitalize | 每个单词首字母大写 |
none | 不转换 |
这个属性只改变显示效果，不会改变 HTML 中原本的文字内容。
white-space
white-space 用于控制空格和换行怎么显示。
.code-text {
white-space: pre-wrap;
}常见值：
| 值 | 说明 |
|---|---|
normal | 默认值，多个空格会合并，自动换行 |
nowrap | 不自动换行 |
pre | 保留空格和换行，不自动换行 |
pre-wrap | 保留空格和换行，也允许自动换行 |
如果想让一行文字不换行，可以使用 white-space: nowrap;。
如果想显示用户输入的换行内容，可以考虑 white-space: pre-wrap;。
font 简写属性
font 可以一次设置多个字体相关属性。
p {
font: italic 700 16px/1.6 Arial, sans-serif;
}这个写法包含：
italic：对应font-style700：对应font-weight16px：对应font-size1.6：对应line-heightArial, sans-serif：对应font-family
使用 font 简写时，font-size 和 font-family 通常必须写。
初学时建议先分开写，更清楚。
例子
设置正文排版
<article class="post">
<h1>文章标题</h1>
<p>这是一段正文内容，用来展示文章的阅读效果。</p>
</article>.post {
font-family: Arial, "Microsoft YaHei", sans-serif;
color: #333333;
}
.post h1 {
font-size: 28px;
line-height: 1.3;
}
.post p {
font-size: 16px;
line-height: 1.8;
}这个例子中，标题更大，正文行高更宽，阅读起来会更清楚。
设置链接文字
<a class="read-more" href="#">阅读更多</a>.read-more {
color: #2563eb;
font-weight: 700;
text-decoration: none;
}
.read-more:hover {
text-decoration: underline;
}这里去掉了链接默认下划线，但在鼠标移上去时通过 :hover 显示下划线。
这样既能让页面更简洁，也能保留链接的提示效果。
设置按钮文字
<button class="btn">提交</button>.btn {
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
}按钮文字适当加粗、增加字符间距，可以让按钮更醒目。
特点
font-family控制字体类型font-size控制文字大小font-weight控制文字粗细line-height控制行高，影响阅读舒适度text-align控制文本对齐方式text-decoration常用于链接下划线、删除线等效果text-indent常用于中文段落首行缩进letter-spacing可以让标题或按钮文字更有设计感- 字体排印不只是装饰，也会影响可读性和可访问性
注意事项
- 正文文字不要太小，否则阅读困难
- 行高不要太挤，正文常见可以设置为
1.5到1.8 - 字体名称中有空格时，需要用引号包起来，例如
"Microsoft YaHei" font-family最后建议写一个通用字体族，例如sans-serif- 不要随便去掉链接下划线，除非还有其他明显样式能表示它是链接
- 大段文字不适合使用过大的
letter-spacing text-align: justify;在中文或窄屏中可能出现奇怪间距- 使用特殊字体时，要注意用户电脑上是否安装了这个字体
理解
可以把 CSS 字体排印理解为给文字做“阅读优化”。
font-size 决定字有多大，font-weight 决定字有多粗，line-height 决定行与行之间有多松。
text-align、text-indent、letter-spacing 这些属性则是在控制文字的排列方式。
好的字体排印不是让文字变复杂，而是让用户更容易看清楚、更愿意读下去。