1.7 文本样式和字体

在 CSS 中，文本样式和字体控制是网页设计中至关重要的一部分。通过设置不同的字体、大小、间距、对齐方式等，开发者可以显著改善页面的可读性和视觉效果。本文将介绍如何使用 CSS 来设置文本样式，涵盖字体、大小、行高、字距、文本对齐等常见属性。

1.7.1 字体的设置

字体的设置决定了网页中文字的外观，包括字体家族、字体大小、字体粗细、样式和变换等。CSS 提供了多种方式来定义字体。

1.7.1.1 字体家族（font-family）

font-family 属性用来设置文本的字体。可以指定多个字体名称，浏览器会按顺序尝试使用这些字体，直到找到一种可用的字体。如果没有找到指定的字体，则会使用系统默认字体。

p {
  font-family: "Arial", "Helvetica", sans-serif; /* 使用 Arial 字体，如果没有则尝试 Helvetica，最后使用 sans-serif 系统字体 */
}

常见字体类型：
- 无衬线字体（Sans-serif）：如 Arial、Helvetica。
- 衬线字体（Serif）：如 Times New Roman、Georgia。
- 等宽字体（Monospace）：如 Courier、Courier New。
- 手写字体（Cursive）：如 Brush Script, Comic Sans MS。
- Fantasy 字体：如 Impact。

1.7.1.2 字体大小（font-size）

font-size 属性用于设置文本的大小。字体大小可以使用不同的单位，如像素（px）、相对单位（em、rem）、百分比（%）等。

常见单位：
- px：绝对单位，适合精确控制字体大小。
- em：相对单位，基于父元素的字体大小来计算。
- rem：相对单位，基于根元素（<html>）的字体大小来计算。
- %：相对单位，基于父元素的字体大小来设置。

h1 {
  font-size: 2rem; /* 基于根元素字体大小的 2 倍 */
}
p {
  font-size: 16px; /* 使用固定的像素大小 */
}

1.7.1.3 字体粗细（font-weight）

font-weight 属性用于设置字体的粗细。常见的取值包括：

normal（常规）；
bold（加粗）；
bolder（更粗的字体）；
lighter（更细的字体）；
100 到 900 之间的数字值（例如 font-weight: 700; 对应加粗，400 对应常规字体）。

h1 {
  font-weight: bold; /* 加粗字体 */
}
p {
  font-weight: 400; /* 正常字体 */
}

1.7.1.4 字体样式（font-style）

font-style 属性用于设置字体样式。常见的值包括：

normal（常规字体）；
italic（斜体）；
oblique（倾斜体，通常与 italic 类似，但不完全相同）。

p {
  font-style: italic; /* 斜体 */
}

1.7.1.5 字体变换（text-transform）

text-transform 属性用于控制文本的大小写转换。常见的值包括：

uppercase：将文本转换为大写字母。
lowercase：将文本转换为小写字母。
capitalize：将每个单词的首字母转换为大写。

h1 {
  text-transform: uppercase; /* 大写文本 */
}

1.7.2 行高和字距

调整行高和字距能够使文本更加易读，尤其在设计较大文本或多行文本时尤为重要。

1.7.2.1 行高（line-height）

line-height 属性用于设置文本行与行之间的垂直距离。它可以通过数字、长度或百分比来设置，默认值通常为字体的 1.2 到 1.5 倍。

数值：如果设置为一个数值（如 1.5），则表示相对于字体大小的倍数。
长度单位：如 px、em，具体的像素或相对值。
百分比：相对于字体大小的百分比。

p {
  line-height: 1.6; /* 行高为字体大小的 1.6 倍 */
}

1.7.2.2 字距（letter-spacing）

letter-spacing 属性用于调整字符之间的距离。它的默认值是 normal，可以使用像素（px）或其他长度单位来增加或减少字距。

h1 {
  letter-spacing: 2px; /* 增加字母之间的间距 */
}

1.7.2.3 单词间距（word-spacing）

word-spacing 属性用于调整单词之间的距离。类似于 letter-spacing，它也可以使用像素或其他长度单位来设置。

p {
  word-spacing: 4px; /* 增加单词之间的间距 */
}

1.7.3 文本对齐和方向

文本的对齐和方向可以影响排版效果，尤其在多语言和响应式设计中。

1.7.3.1 文本对齐（text-align）

text-align 属性用于设置文本的水平对齐方式。常见的值有：

left：左对齐（默认值）。
right：右对齐。
center：居中对齐。
justify：两端对齐，行间距会调整，使文本填满整个宽度。

h1 {
  text-align: center; /* 居中对齐 */
}

1.7.3.2 文本方向（direction）

direction 属性用于设置文本的书写方向。常见的值包括：

ltr：从左到右（适用于大多数语言，如英文）。
rtl：从右到左（适用于阿拉伯语、希伯来语等语言）。

div {
  direction: rtl; /* 右到左书写方向 */
}

1.7.3.3 文本装饰（text-decoration）

text-decoration 属性用于设置文本的装饰效果，常见的值包括：

none：没有装饰（默认）。
underline：下划线。
overline：上划线。
line-through：删除线。
blink：闪烁（已废弃）。

a {
  text-decoration: underline; /* 添加下划线 */
}

1.7.4 文本阴影

text-shadow 属性可以为文本添加阴影效果，增加文本的立体感。其语法格式为：

text-shadow: h-shadow v-shadow blur-radius color;

h-shadow：水平阴影的偏移量（正值向右，负值向左）。
v-shadow：垂直阴影的偏移量（正值向下，负值向上）。
blur-radius：阴影模糊的半径（可选，默认值为 0）。
color：阴影的颜色。

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 添加轻微的黑色阴影 */
}

1.7.5 使用 Web 字体

除了常规的本地字体，CSS 还支持使用 Web 字体，通过 @font-face 或第三方字体服务（如 Google Fonts）加载字体。

1.7.5.1 使用 `@font-face`

通过 @font-face 可以将自定义字体应用到网页中。例如：

@font-face {
  font-family: "MyCustomFont";
  src: url("mycustomfont.woff2") format("woff2"),
       url("mycustomfont.woff") format("woff");
}

body {
  font-family: "MyCustomFont", sans-serif;
}

1.7.5.2 使用 Google Fonts

Google Fonts 提供了一个广泛的免费字体库。可以通过 <link> 标签将字体加载到网页中。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

然后在 CSS 中使用该字体：

body {
  font-family: 'Roboto', sans-serif;
}

总结

字体的设置：使用 font-family 设置字体家族，font-size 控制字体大小，font-weight 和 font-style 设置字体的粗细和样式。
文本布局：通过 line-height、letter-spacing、word-spacing 等控制文本的行间距和字符间距，以提升可读性。
文本对齐和方向：text-align 和 direction 控制文本的对齐方式及书写方向。
文本装饰和阴影：使用 text-decoration 添加下划线、删除线等效果，text-shadow 为文本添加阴影。
Web 字体：通过 @font-face 或 Google Fonts 使用自定义字体，使页面更具个性。

掌握这些文本样式和字体设置技巧，可以帮助你创建美观、清晰且具有良好用户体验的网页。

#前端开发分享于 2025-03-09

上一篇：1.6 颜色和渐变下一篇：2.1 盒模型详解

1.7 文本样式和字体