CSS font-family 属性

什么是font-family属性

CSS的font-family属性定义了元素的字体系列。字体系列即为一系列字体族名字的优先级表。浏览器会依次使用由开发者定义的字体族名字，以找到一个可用的字体。

当开发者定义一个字体样式时，font-family属性可以指定一个或多个字体系列。浏览器会自动加上逗号分隔符，以便浏览器在当前系统中找到有效的字体。如果当前系统中没有匹配的字体，则会使用默认字体进行显示。

例如：

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

这个例子中，paragraph元素的字体系列定义了三种字体风格：默认的Times New Roman，备选的Times，以及一个通用的serif字体。

如果 Times New Roman 不可用，浏览器将检查 Times，如果仍然无法使用，则最后使用Serif字体。

当您指定多个字体系列时，请注意添加单引号或双引号，以确保浏览器能够正确解析字体名称（如果名称包含空格）。

字体系列可以根据字体类型进行相应的分类：

衬线体字体在字母的极端处有衬线，衬线在一些情况下可以提升具有衬线的字体的可读性。

常见的衬线体字体包括明示体，Georgia，Times New Roman，等等。

可以使用以下CSS代码将段落的字体系列设置为衬线体字体：

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

无衬线体字体就如其名字一样，没有字母末端的衬线。它通常被认为是现代和简洁的字体类型。

常见的无衬线体字体包括Arial，Tahoma，Verdana等等。

可以使用以下CSS代码将段落的字体系列设置为无衬线体字体：

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

等宽字体的每个字符的宽度是相同的，这样排版可以更加舒适，适用于代码编辑软件或者验证码等场合。

常见的等宽字体包括Courier New，Lucida Console，等等。

可以使用以下CSS代码将段落的字体系列设置为等宽字体：

p {
  font-family: "Courier New", Courier, monospace;
}

在使用font-family属性时，可以根据字体的重要程度来定义一个字体堆。

字体栈会从上到下解析，检查第一个字体是否可用。如果不可用，将检查下一个，然后再检查下一个，直到找到可用的字体。

如果所有定义的字体都不可用，浏览器会使用默认字体进行显示。

以下是使用字体栈的示例：

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

这里，p标签的文字样式的字体系列定义了三种不同的字体：Arial，Helvetica和一个通用的sans-serif字体。

由于Arial是字体堆中最优先的字体，因此浏览器会首先尝试运用Arial字体展示p标签。

font-family属性使用一个或多个字体名称创建一个字体系列，以便从中选择可用的字体进行显示。常见的字体类型有衬线体字体，无衬线体字体以及等宽字体。对于字体名称的定义可以使用字体栈来层次化表达。