CSS中的通用字体
往往设计师在设计时一厢情愿地去思考问题，那样会带来很多潜在的麻烦。事实上你可以为网页设计任意字体，包括艺术字体。也许你的计算机中已经安装了很多字体，但是不能够保证所有的浏览者都已经安装了相同的字体，因此，当你非常想使用各种个性字体或艺术字体美化页面时，你可以使用下面的方法来解决此类矛盾。
一种方法是在font-family属性设置你喜欢的字体，同时也定义一些备用字体。如果浏览者的系统中安装了指定的字体，就会看到漂亮的页面，如果没有，浏览器会自动搜索在font-family属性中指定的字体列表，直到找到备用字体为止。
另一种方法是为font-family属性指定通用字体。所谓通用字体，就是它表示一类字体，这样浏览器就能够根据你指定的字体类别从本地系统中找到类型相同的字体来解析网页文字。
也许你看到的字体成千上万，其显示的效果和风格也千差万别，例如，打印体、艺术体、手写体、象形体、卡通体、古典体等。但是几乎所有的字体都可以归为两类：serif和sans-serif。
serif类型的字体是成比例有衬线的字体。成比例是指字体中的所有字母根据它们不同的尺寸占据不同的宽度。例如，字母l和m所占的宽度是不同的。衬线是指字体上附加的装饰性细线。例如，小写字母l会在顶部和底部附加细小的“手”和“脚”。常用serif型字体有Times、Times New Roman、Georgia等。sans-serif类型的字体是有比例但是没有衬线的字体。常用的sans-serif类型字体有Arial、Helvetica等。例如，在下面的代码中，我们可以直观地比较serif和sans-serif类型字体的显示效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .p1{ font:36px "Times New Roman", Times, serif; } .p2{ font: 36px Arial, Helvetica, sans-serif; } </style> </head> <body> <p class="p1">The World Wide Web Consortium ---serif</p> <p class="p2">The World Wide Web Consortium ---serif</p> </body> </html>
serif类型的字体很适合在正文中使用，这些“手”和“脚”装饰线很容易把一行内所有的字母联系在一起，使浏览者的视线随着这些细线不断从左向右的牵引，这样能够提高阅读速度。
而sans-serif类型字体由于没有这些装饰线，整个字体显得干净、利落，很适合作为文章的标题文字使用。
除了上面两类常用的通用字体外，在罗马字符中还可以看到下面几种类型的字体，当然这些字体在网页设计中不是很常用，多用于传统印刷中。
cursive：模拟人笔迹的字体，一般这些字体大部分是由曲线和比衬线字体更强的笔画修饰组成。例如，Comic Sans。
fantasy：特殊字体，这些字体不能通过某种单一的特性来定义，而且也不能简单地归为其他系列的某一类。例如，Western、Klingon。
monospace：无比例的字体，通常用于模拟打印机打出的字体，这些字体中的每个字符都占有同样的宽度。例如，Courier。
当在网页中定义字体样式时，一般建议字体列表的最后一种字体选择通用字体，这主要是考虑到当浏览者的系统中没有指定字体时，浏览器可以搜索系统中同类字体来显示网页字体。
摘自《精通CSS网页布局》第3章