字体家族属性的语法
版式设计是成功网站设计中极为重要的一部分。 使用易于阅读和看起来很棒的文字创建网站是每个网页设计专业人员的目标。 为了达到这个目的，你需要能够设置你想要在你的网页上使用的特定字体。 要在Web文档中指定字体或字体系列，您将在CSS中使用font-family样式属性。
您可以使用的最简单的字体家族风格只包括一种字体系列：
p {font-family：Arial; }如果将此样式应用于页面，则所有段落都将显示在“Arial”字体系列中。 这很好，因为“Arial”是所谓的“网络安全字体”，这意味着大多数（如果不是全部的话）计算机将安装它，您可以很容易地知道您的页面将以预期的字体显示。
那么如果你选择的字体找不到，会发生什么？ 例如，如果您不在页面上使用“网页安全字体”，那么用户代理在没有该字体时会执行什么操作？ 他们进行替代。
这可能会导致一些非常有趣的页面。 我曾经去过一个页面，在那里我的电脑完全在“Wingdings”（一个图标集）中显示它，因为我的电脑没有开发者指定的字体，而且我的浏览器在它的字体上做出了非常糟糕的选择用作替代品。 该页面对我来说完全不可读！ 这是字体堆栈的作用。
用字体堆栈中的逗号分隔多个字体系列
“字体堆栈”是您希望页面使用的字体列表。 您可以按照您的偏好设置字体选项，并用逗号分隔各个字体。 如果浏览器没有列表上的第一个字体系列，它将尝试第二个，然后第三个，直到它找到它在系统上的一个。
font-family：Pussycat，阿尔及利亚人，百老汇;在上面的例子中，浏览器将首先查找“Pussycat”字体，然后查找“阿尔及利亚”，然后是“百老汇”，如果没有找到其他字体。 这给了你至少一个你选择的字体将被使用的机会。 这并不完美，这就是为什么我们还有更多的东西可以添加到我们的字体堆栈中（继续阅读！）。
最后使用通用字体
所以你可以创建一个带有字体列表的字体堆栈，但浏览器仍然没有找到。 如果浏览器做出了糟糕的替代选择，你显然不希望自己的页面显示不可读。 幸运的是，CSS也有一个解决方案： 通用字体 。
您应该始终使用通用字体来结束您的字体列表（即使它是一个家庭列表或仅限Web安全字体）。 有五个你可以使用：
- 草书
- 幻想
- 等宽
- 无衬线字体
- 衬线
以上两个示例可能会更改为：
font-family：Arial，sans-serif; 字体家族：Pussycat，阿尔及利亚，百老汇，幻想;某些字体家族名称是两个或更多字
如果您要使用的字体系列不只一个字，那么您应该用双引号括起来。 虽然有些浏览器可以在不带引号的情况下读取字体系列，但如果空白字符被压缩或忽略，则可能会出现问题。
font-family：“Times New Roman”，serif;在这个例子中，你可以看到字体名称为“Times New Roman”，它是多字的，用引号括起来。 这告诉浏览器，这三个单词都是该字体名称的一部分，而不是三种不同的字体，都是单字的名称。
Jennifer Krynin的原创文章。 由Jeremy Girard在12/2/16编辑