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。与有衬线字体一样,无衬线字体在标题以及长篇文字中也十分适合。但是有一些使用者更倾向于太多文字内容的地方,避免使用无衬线字体,尤其是在字体又很小的情况下会更难阅读。