虽然图片在网站上获得了很大的爱，但它是一种吸引搜索引擎并且传播大多数网站内容的文字。 因此，印刷设计是网站设计中至关重要的一部分。 随着网站文本的重要性，需要确保它看起来不错并且易于阅读。 这是通过CSS（层叠样式表）样式完成的。
遵循现代网页设计标准，当你想口授网站文本内容的外观时，你将使用CSS来完成。 这将CSS样式从页面的HTML结构中分离出来。 例如，如果您想将页面的字体设置为“Arial”，则可以通过将以下样式规则添加到CSS中来实现（请注意 - 这可能会在外部CSS样式表中完成，为网站上的每一页）：
body {font-family：Arial; }该字体是为“body”设置的，因此CSS级联会将样式应用于页面的所有其他元素。 这是因为每个其他HTML元素都是“body”元素的子元素，CSS样式（如字体系列或颜色）将从父元素级联到子元素。 除非为特定元素添加更具体的样式，否则将是这种情况。 这个CSS唯一的问题是只指定一个字体。 如果由于某种原因无法找到该字体，浏览器将替换其他字体。 这很糟糕，因为你无法控制使用什么字体 - 浏览器会为你选择，你可能不喜欢它决定使用的东西！ 这是一个字体栈来的地方。
字体堆栈是CSS font-family声明中的字体列表。 字体按优先顺序列出，以便在出现类似字体未加载的问题时，您希望它们出现在网站上。 字体堆栈允许设计人员控制网页上字体的外观，即使计算机没有您要求的初始字体。
那么字体堆栈看起来如何？ 这里是一个例子：
body {font-family：Georgia，“Times New Roman”，serif; }这里有几件事要注意。
首先，你会看到我们用逗号分隔了不同的字体名称。 每个人之间你可以添加尽可能多的字体，只要用逗号分隔即可。 浏览器将尝试加载首先指定的第一个字体。 如果失败了，它会在尝试每种字体的行中运行，直到找到可以使用的字体。 在这个例子中，我们使用的是网络安全字体，并且可能在访问该网站的人的计算机上找到“Georgia”（注意 - 浏览器在您的计算机上查找页面上指定的字体，所以该网站实际上是告诉从你的系统加载字体的计算机）。 如果由于某种原因没有找到字体，它会向下移动堆栈并尝试指定下一个字体。
关于下一个字体，请注意它是如何写入堆栈的。 “Times New Roman”的名称包含在双引号中。 这是因为字体名称有多个词。 任何带有多个单词的字体名称（Trebuchet MS，Courier New等）必须在双引号中加上名称，以便浏览器知道所有这些单词都是一个字体名称的一部分。
最后，我们用“serif”结束字体堆栈，这是一种通用的字体分类。 在不太可能的情况下，您的堆栈中已命名的字体都不可用，浏览器只会找到至少属于您选择的正确分类的字体。 例如，如果您使用的是Sans-serif字体（如Arial和Verdana），则结束使用“sans-serif”分类的字体堆栈时，至少会在整个系列中保留该字体（如果存在加载问题）。 无可否认，浏览器很难找到堆栈中列出的任何字体，而必须使用这种通用分类，无论如何，最好的做法是加入它，以确保双重安全。
字体堆栈和Web字体
今天的许多网站使用网站中包含的网页字体以及其他资源（如网站图片，Javascript文件等），或者链接到异地字体位置，如Google Fonts或Typekit。 由于链接到文件本身时应加载这些字体，因此您仍然希望使用字体堆栈以确保您可以控制可能出现的任何问题。 同样的事情适用于应该在某人电脑上的“网页安全”字体（请注意，我们在本文中用作示例的字体，包括Arial，Verdana，Georgia和Times New Roman）都是Web安全字体，应该是在一个人的电脑上）。 尽管缺少字体的可能性非常低，但指定字体堆栈将尽可能地有助于防止网站的印刷设计 。
Jennifer Krynin的原创文章。 在8/9/17由Jeremy Girard编辑