文本和字体样式

font

1. font 相关属性

CSS 提供了多个 font 相关属性，我们可以分别设置这些属性，或者使用 font 简写属性来一键定义所有字体样式。

属性	作用
font-family	设置字体系列
font-size	设置字体大小
font-weight	设置字体粗细
font-style	设置字体样式（斜体）
font-variant	设置小型大写字母
line-height	设置行高
letter-spacing	设置字母间距
word-spacing	设置单词间距
font	组合所有 font 相关属性

---

2. font-family（字体系列）

font-family 用于定义元素的字体，支持多个字体作为后备方案。

允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font.

p {
  font-family: Arial, Helvetica, sans-serif;
}

使用多个字体

p {
  font-family: "Times New Roman", Georgia, serif;
}

• "Times New Roman"：首选字体
• Georgia：如果 Times New Roman 不可用，使用 Georgia
• serif：如果前面两种字体都不可用，使用系统默认的衬线字体

常见字体族

类型	说明	示例
serif	有衬线字体，笔画末端带装饰	"Times New Roman", Georgia
sans-serif	无衬线字体，笔画干净简洁	"Arial", "Helvetica"
monospace	等宽字体，所有字符宽度相同	"Courier New", Monaco
cursive	手写风格字体	"Brush Script MT", Comic Sans MS
fantasy	艺术字体	"Papyrus", "Impact"

✅ 建议 使用 sans-serif，提高可读性。

网页安全字体，默认字体，字体栈

---

3. font-size（字体大小）

控制字体大小，可以使用不同单位：

p {
  font-size: 16px; /* 绝对单位 */
  font-size: 1.2em; /* 相对单位 */
  font-size: 120%; /* 百分比 */
}

常见单位

单位	说明	示例
px	像素，固定大小	font-size: 16px;
em	相对父元素大小	font-size: 1.2em;
rem	相对 html 根元素大小	font-size: 1.2rem;
%	相对父元素的大小	font-size: 120%;
vw / vh	相对于视口宽度 / 高度	font-size: 5vw;

✅ 推荐

• 响应式设计 使用 rem
• 固定大小 使用 px

---

4. font-weight（字体粗细）

用于调整字体的粗细：

p {
  font-weight: bold;
}

可选值

值	说明
normal	默认（等于 400）
bold	加粗（等于 700）
lighter	比正常字体更细
bolder	比正常字体更粗
100 - 900	数值，100 最细，900 最粗

✅ 适用于 强调文本、标题。

---

5. font-style（字体样式）

用于设置文本是否为斜体或倾斜：

p {
  font-style: italic;
}

可选值

值	说明
normal	正常字体
italic	斜体（如果字体支持）
oblique	斜体（强制倾斜）

✅ 适用于 强调、引用。

---

6. font-variant（小型大写字母）

将小写字母转换为 小型大写字母：

p {
  font-variant: small-caps;
}

可选值

值	说明
normal	默认，不转换
small-caps	小写字母变为小型大写

✅ 适用于 正式文档、论文标题。

---

7. line-height（行高）

控制行距（行间距）：

p {
  line-height: 1.5;
}

推荐数值

• 1.5（提高可读性）
• 2（适用于大段文字）

---

8. letter-spacing（字母间距）

控制字母之间的距离：

p {
  letter-spacing: 2px;
}

✅ 适用于大标题、LOGO 设计

---

9. word-spacing（单词间距）

控制单词之间的距离：

p {
  word-spacing: 5px;
}

✅ 适用于增加文本可读性

---

10. font（字体简写）

font 允许一行代码同时设置多个字体属性：

p {
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

简写规则

1. font-style
2. font-variant
3. font-weight
4. font-size / line-height
5. font-family

✅ 简化代码，提高可读性！

text

1. color（文本颜色）

用于设置文本颜色，可以使用多种格式：

p {
  color: red; /* 颜色名称 */
  color: #ff5733; /* 十六进制 */
  color: rgb(255, 0, 0); /* RGB */
  color: rgba(255, 0, 0, 0.5); /* RGBA (带透明度) */
}

✅ 推荐 使用 rgba() 控制透明度。

---

2. text-align（文本对齐）

设置文本的对齐方式：

p {
  text-align: center;
}

可选值

值	说明
left	左对齐（默认）
right	右对齐
center	居中对齐
justify	两端对齐（填满整行）

✅ 适用于文章正文、标题

---

3. text-decoration（文本装饰）

用于添加或移除文本装饰效果：

a {
  text-decoration: none;
}

可选值

值	说明
none	无装饰（默认）
underline	下划线
line-through	删除线
overline	上划线

✅ 常用于 去掉超链接默认的下划线。

---

4. text-transform（文本转换）

用于改变文本大小写：

p {
  text-transform: uppercase;
}

可选值

值	说明
none	默认（无变化）
uppercase	转换为大写
lowercase	转换为小写
capitalize	首字母大写

✅ 适用于 标题、品牌名称。

---

5. text-indent（首行缩进）

设置文本段落的首行缩进：

p {
  text-indent: 30px;
}

✅ 适用于文章、新闻排版

---

6. letter-spacing（字母间距）

控制字符之间的距离：

p {
  letter-spacing: 2px;
}

✅ 适用于大标题、LOGO 设计

---

7. word-spacing（单词间距）

控制单词之间的距离：

p {
  word-spacing: 5px;
}

✅ 适用于增加文本可读性

---

8. line-height（行高）

控制行间距：

p {
  line-height: 1.5;
}

推荐值

• 1.5（提高可读性）
• 2（适用于大段文字）

✅ 适用于段落排版

---

9. white-space（空白处理）

控制文本中的空格、换行：

p {
  white-space: nowrap;
}

可选值

值	说明
normal	默认，忽略多余空格，自动换行
nowrap	不换行
pre	保留空格和换行（类似 <pre>）
pre-wrap	保留空格，允许换行
pre-line	多余空格缩小到 1 个，保留换行

✅ 适用于表格单元格、按钮文本

---

10. text-overflow（文本溢出处理）

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

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

可选值

值	说明
clip	直接裁剪文本
ellipsis	用 ... 省略文本

✅ 适用于固定宽度的文本

---

11. direction（文本方向）

控制文本的书写方向：

p {
  direction: rtl;
}

值	说明
ltr	从左到右（默认）
rtl	从右到左（阿拉伯语、希伯来语）

✅ 适用于多语言网站

---

12. text-shadow（文本阴影）

为文本添加阴影效果：

p {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

参数

参数	说明
2px	水平偏移量
2px	垂直偏移量
5px	模糊半径
rgba(0, 0, 0, 0.3)	阴影颜色

✅ 适用于 立体感标题、卡片 UI。

---

13. writing-mode（文字书写方向）

控制文本的书写方式：

p {
  writing-mode: vertical-rl;
}

可选值

值	说明
horizontal-tb	水平书写（默认）
vertical-rl	从右到左垂直书写（适用于日文、中文）
vertical-lr	从左到右垂直书写

✅ 适用于竖排文本设计