CSS字体族属性和字体堆栈的使用

排版设计是一个批判性的网站设计的重要作用。创建具有易于阅读的文本的网站，看起来很棒是每个网络设计专业人士的目标。为此，您需要能够设置要在网页上使用的特定字体。要在Web文档上指定字体或字体系列，您将使用您的字体 - 族样式属性CSS.。

您可以使用的最简单的字体家庭风格将包括一个字体系列：

p {
字体类型:Arial;
}

如果将此样式应用于页面，则所有段落将显示在“Arial”字体系列中。这是伟大的，因为“ARIAL”是所谓的“网络安全字体”，这意味着大多数（如果不是全部）计算机将安装它，您可以轻松了解您的页面将显示在预期字体中。

如果找不到所选择的字体怎么办?例如，如果你没有在一个页面上使用“web安全字体”，如果用户代理没有这种字体怎么办?他们做了替换。

这可能会产生一些看起来很有趣的页面。我曾经访问过一个页面，在那里我的计算机完全以“Wingdings”(一种图标集)的形式显示它，因为我的计算机没有开发人员指定的字体，我的浏览器做出了一个糟糕的选择，它将使用什么字体作为替代。这一页对我来说完全无法阅读!这就是字体堆栈发挥作用的地方。

在字体堆中使用逗号分隔多个字体族

“字体堆栈”是您希望页面要使用的字体列表。您将按您的偏好顺序放置您的字体选择，并使用逗号分隔。如果浏览器在列表上没有第一个字体系列，则它将尝试第二个，然后第三个等，直到它找到它在系统上的一个。

Font-Family：Pussycat，阿尔及利亚，百老汇;

在上面的例子中，浏览器将首先寻找“Pussycat”字体，然后是“Algerian”，然后是“Broadway”，如果没有找到其他字体。这给了你更多的机会，至少你选择的一个字体将会被使用。它并不完美，这就是为什么我们还有更多可以添加到我们的字体堆栈(请继续阅读!)

最后使用通用字体

因此，您可以创建一个带有字体列表的字体堆栈，但仍然没有浏览器可以找到的字体。如果浏览器做出了糟糕的替代选择，您不希望页面显示为不可读。幸运的是，CSS对此也有一个解决方案，叫做通用的字体。

你应该总是以通用字体结束你的字体列表(即使它是一个家族或只有web安全字体的列表)。你可以使用以下五种方法:

• 草书
• 幻想
• 单座
• 无衬线
• 衬里

上述两个示例可能会更改为：

Font-Family：Arial，Sans-Serif;

或者

Font-Family：Pussycat，阿尔及利亚，百老汇，幻想;

一些字体家族名称是两个或两个以上的单词

如果您想要使用的字体系列有多个单词，那么您应该用双引号将其包围起来。虽然有些浏览器可以读取没有引号的字体系列，但如果空格被压缩或忽略，可能会出现问题。

font-family: "宋体";

在本例中，您可以看到字体名称“Times New Roman”，它是多字的，是用引号括起来的。这告诉浏览器这三个单词都是该字体名的一部分，而不是三种不同的字体都只有一个单词的名称。