什么是通用的字体系列在CSS?

即使特定字体无法加载,通用字体也能保护网站的设计

墨迹覆盖的传统铅字块

Grant Faint / Getty Images

字体设计在网站设计中扮演着重要的角色。布局和格式良好的文本内容有助于创建一个既愉快又容易消费的阅读体验,从而使网站更成功。在处理字体时,你的一部分工作将是为你的设计选择正确的字体,然后使用CSS将这些字体和字体样式添加到页面显示中。这是通过使用所谓的字体堆栈

字体栈

当你指定一个字体要在网页上使用,最好的做法是在找不到字体选择的情况下,也要包括后备选项。类中提供了这些后备选项字体堆栈。如果浏览器无法找到堆栈中列出的第一种字体,它将移到下一种字体。它继续这个过程,直到找到一个它可以使用的字体,或者它用尽了选择(在这种情况下,它只选择任何它想要的系统字体)。下面是一个应用于body元素的CSS字体堆栈的例子:

身体{
font-family:宋体,"Times New Roman", serif;
}

字体Georgia首先出现,所以默认情况下,这是页面将使用的字体,但如果该字体由于某种原因不可用,页面会退回到Times New Roman。

附上新罗马字体在双引号中,因为它是一个多单词名称。单字字体名称,如Georgia或Arial,不需要引号,但带有嵌入空格的多字字体名称需要引号,以便浏览器知道所有这些词构成了字体名称。

字体堆栈以单词结尾衬线。这是一个通用字体族名。如果一个人没有乔治亚或者新罗马字体在他们的电脑上,网站会使用任何能找到的衬线字体。浏览器会为你选择字体,但至少你提供了指导,让它知道什么样的字体在设计中最有效。

通用字体家庭

CSS中可用的通用字体名称是:

  • 草书
  • 幻想
  • 等宽字体
  • 衬线
  • 无衬线

虽然在网页设计和排版中有很多其他的字体分类,包括板衬线字体、黑字字体、显示字体、grunge字体等等,但这五种通用的字体名称是你可以在CSS字体堆栈中使用的。

  • 草书字体——通常以薄而华丽的字体为特色,意在复制花哨的手写文字。这些字体,因为它们的细,华丽的字母,不适合大块的内容,如正文副本。草书字体通常用于标题和较短的文本需求,可以显示在较大的字体大小。
  • 幻想的字体-是有些疯狂的字体,不属于任何其他类别。复制著名商标的字体,比如哈利波特回到未来电影,就属于这一类。这些字体不适用于正文内容,因为它们通常是如此程式化,以至于阅读用这些字体写的较长的文本段落太难了。
  • 等宽字体的字体-像你在旧打字机上找到的一样大小和间距相同的字母形式。不像其他字体,有可变的宽度的字母取决于其大小(例如,一个大写W比小写字母占用更多空间), monospace字体对所有字符使用固定的宽度。这些字体通常用于代码读出,因为它们看起来与该页上的其他文本明显不同。
  • 衬线字体-在字型上使用少量额外的结扎。这些多余的部分被称为衬线。常用的衬线字体是格鲁吉亚和时代新罗马。衬线字体非常适合大文本,如标题以及文本和正文副本的长段落。
  • 无衬线字体-不要绑扎。这个名字的意思是无衬线。这类常用字体包括Arial或Helvetica。与衬线字体类似,sans-serif字体在标题和正文内容中表现得同样好,尽管一些专家更喜欢大的文本块避免使用sans-serif字体,因为它们在小字号下更难阅读。
这个页面有用吗?