CSS字体设置详解

在网页设计中，字体的选择和设置是非常重要的一部分，它不仅影响网页的美观性，也影响用户的阅读体验，CSS（层叠样式表）提供了丰富的字体设置选项，可以让我们灵活地控制网页中的字体样式，本文将详细介绍CSS字体设置的各种方法和技巧。

1、字体系列：font-family

font-family属性用于设置网页中文本的字体系列，浏览器会按照字体系列列表的顺序来选择字体，当第一个字体不可用时，就会选择下一个，默认情况下，浏览器会使用用户电脑中安装的默认字体。

我们可以设置一个包含多种字体的列表：

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

2、字体大小：font-size

font-size属性用于设置网页中文本的字体大小，它可以设置成具体的像素值，也可以设置成相对单位（如em、rem等）。

我们可以设置一个段落的字体大小为16像素：

p {
  font-size: 16px;
}

我们也可以使用相对单位来设置字体大小，这样当父元素的字体大小改变时，子元素的字体大小也会相应地改变：

p {
  font-size: 0.8em;
}

3、字体粗细：font-weight

font-weight属性用于设置网页中文本的字体粗细，它可以设置为normal（正常）、bold（粗体）、bolder（更粗）或lighter（更细）。

我们可以设置一个段落的字体粗细为粗体：

p {
  font-weight: bold;
}

4、字体样式：font-style

font-style属性用于设置网页中文本的字体样式，它可以设置为normal（正常）、italic（斜体）或oblique（倾斜）。

我们可以设置一个段落的字体样式为斜体：

p {
  font-style: italic;
}

5、行高：line-height

line-height属性用于设置网页中文本的行高，它可以设置为具体的像素值，也可以设置为相对单位（如em、rem等），行高是指一行文本的高度，包括文字本身的高度和上下的空隙。

我们可以设置一个段落的行高为1.5倍：

p {
  line-height: 1.5;
}

6、字母间距：letter-spacing

letter-spacing属性用于设置网页中文本的字母间距，它可以设置为正值或负值，正值表示增加字母间距，负值表示减少字母间距。

我们可以设置一个段落的字母间距为0.1em：

p {
  letter-spacing: 0.1em;
}

7、文字装饰：text-decoration

text-decoration属性用于设置网页中文本的文字装饰效果，如下划线、上划线和删除线，它可以接受以下值：none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）和blink（闪烁）。

我们可以设置一个段落的文字装饰为下划线：

p {
  text-decoration: underline;
}