By 时代数字趋势2021-06-25

排版设计在网站设计中起着重要作用，一个有着良好布局及优美格式的文字内容网站更加优秀。而字体在这方面也扮演着重要的角色，你可以选择合适的字体，然后使用CSS将这些字体样式添加到页面中，而这就需要使用到所谓的Font Stack来实现。

Font Stack

当你要指定某网页使用一种字体时，最好也是最稳妥的做法就是选择备用字体，以防之后想用却找不到这种字体，这些字体的备份就在Font Satck中。

如果浏览器找不到Font Stack中指定的第一个字体，那么它就会自动使用下一个字体，以此类推，直到找到可以使用的字体，如果始终都找不到才会选择系统预设字体。

下面是一个在CSS中应用于”body”元素的Font Stack例子：body { font- family:Georgia, "Times New Roman", serif; }

当首位字体为Georgia时，预设页面就会使用这种字体，但如果该字体因某种原因无法使用，页面将使用下一个字体Times New Roman。

Times New Roman这种由多个英文词组成字体名称需要用双引号括起来。单个字的字体名称，如Georgia或Arial，就不需要。一般就是这个字体名称中存在空格就要加双引号。

Font Stack通常都是以serif这个词结束，它是一个通用的字体家族名称。虽然不太可能发生，某电脑上既没有Georgia，也没有Times New Roman的情况。

但假如真的发生，它就会使用能找到的其他衬线字体来代替。这种情况下浏览器会帮你选择字体。

通用字体家族

在CSS中常用的通用字体名称：

• cursive
• fantasy
• monospace
• serif
• sans-serif

虽然在网页设计和排版中还有许多其它的字体，比如slab-serif、blackletter、display、grunge等，但上述这五种通用字体是CSS Font Stack中经常被用到的。

• Cursive (手写体)： 通常具有细而华丽的字母形式，模仿那些花俏的手写文本。这些字体由于花哨，因此并不适合长篇内容。草书字体一般用于标题或较短的文字，同时使用较大字体尺寸来显示。
• Fantasy (另类体)：这种是有些疯狂的字体，不属于任何其他类别，被一些知名的作品或商标使用，比如《哈利波特》或《回到未来》的标题就是使用这样的字体形式。这种字体同样也不适用于长篇文章，因为它们往往风格独特，阅读时比较难懂。
• Monospace (等宽字体)：其特点是大小相同、间隔一致，就像你在老式打字机列印出来的字体。与其他字体不同的是，字母的宽度根据大小而变化，例如大写的W比小写的i佔用的空间大得多，这种字体是使所有字元都使用一样的宽度，这种字体经常被用于程序码。
• Serif (衬线体)：在字形上採用了一些额外的连接点，这些额外的部分被称为衬线。常见的衬线体就是Georgia和Times New Roman，衬线体很适合用于像标题以及长篇文字。
• Sans-serif (无衬线体)：顾名思义就是无衬线字体，也就是没有额外的连接点，常见的包括Arial或Helvetica。与有衬线字体一样，无衬线字体在标题以及长篇文字中也十分适合。但是有一些使用者更倾向于太多文字内容的地方，避免使用无衬线字体，尤其是在字体又很小的情况下会更难阅读。