CSS3文本样式与字体

# 章节一：CSS3文本样式简介

## 1.1 什么是CSS3文本样式？

CSS3文本样式是指利用CSS3技术对网页中的文字内容进行样式设置和装饰，包括但不限于字体、大小、颜色、排列等方面的调整。

## 1.2 CSS3文本样式的优势和应用场景

CSS3文本样式相比之前的版本，在功能上更加丰富与强大，可以实现更多样化的文本效果，并且有助于提升页面的美感与可读性。在网页设计中，CSS3文本样式可以被广泛应用于标题、段落、按钮等元素的样式设置，从而给用户带来更佳的视觉体验。
## 章节二：CSS3文本样式属性

### 2.1 字体属性

在CSS3中，我们可以使用`font-family`属性指定要应用于文本的字体系列。示例如下：

/* 使用字体系列名称 */
h1 {
  font-family: Arial, sans-serif;
}

/* 使用 web 字体 */
body {
  font-family: 'Open Sans', sans-serif;
}

/* 使用无衬线字体 */
p {
  font-family: sans-serif;
}

代码解释：
- 第一段示例代码中，将标题h1的字体系列设置为Arial，如果用户没有安装Arial字体，则会使用系统默认的一个无衬线字体。
- 第二段示例代码中，使用了Google Fonts提供的一个web字体Open Sans。如果用户的浏览器支持下载和解析web字体，将会使用Open Sans，否则，会回退到浏览器的默认字体。
- 第三段示例代码中，将段落p的字体系列设置为无衬线字体，如果用户没有定义默认字体，将会使用浏览器的默认字体。

### 2.2 文本装饰属性

CSS3中的文本装饰属性用于指定文本的装饰效果，如下划线、删除线等。示例如下：

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

/* 添加删除线 */
.del {
  text-decoration: line-through;
}

/* 添加上划线 */
u {
  text-decoration: overline;
}

代码解释：
- 第一段示例代码中，为所有的链接添加了下划线。
- 第二段示例代码中，为class为del的元素添加了删除线。
- 第三段示例代码中，为u标签添加了上划线。

### 2.3 文本阴影属性

CSS3中的文本阴影属性可以为文本添加阴影效果。示例如下：

/* 添加黑色文本阴影 */
h1 {
  text-shadow: 2px 2px 4px #000000;
}

/* 添加红色文本阴影 */
p {
  text-shadow: 1px 1px 2px #FF0000;
}

代码解释：
- 第一段示例代码中，为标题h1添加了一个黑色阴影效果，阴影偏移量为横向2像素，纵向2像素，模糊度为4像素。
- 第二段示例代码中，为段落p添加了一个红色阴影效果，阴影偏移量为横向1像素，纵向1像素，模糊度为2像素。

### 2.4 文本排列属性

CSS3中的文本排列属性用于调整文本的对齐方式和换行策略。示例如下：

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

/* 右对齐 */
p {
  text-align: right;
}

/* 强制不换行 */
span {
  white-space: nowrap;
}

代码解释：
- 第一段示例代码中，将标题h1的文本居中对齐。
- 第二段示例代码中，将段落p的文本右对齐。
- 第三段示例代码中，将span标签内的文本设置为不换行。

### 3. 章节三：CSS3字体属性

在CSS3中，字体属性是用来定义文本的字体样式的。通过字体属性，我们可以指定字体的类型、大小、样式和字重等。接下来，将会介绍CSS3中常用的字体属性并给出相应的代码示例。

#### 3.1 字体类型与字体族

在CSS3中，我们可以通过`font-family`属性来指定文本的字体类型。字体类型可以是Web安全字体，也可以是下载的自定义字体。字体族则是指字体的分类，比如常见的衬线字体、非衬线字体和等宽字体等。

下面是一个示例代码，演示了如何在CSS中设置字体类型：

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

在上面的代码中，我们将段落文本的字体类型设置为了Arial，如果用户的浏览器不支持Arial字体，那么将会显示默认的无衬线