CSS家族五大字体

什么是安全字体

安全字体这个概念，也许很多人都不是很熟悉，我们先举个例子：

这个对字体（font-family）的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。

在上面这个 font-family 的定义中，我们选择 Arial 作为首选字体（注：Arial 字体是最常用的 sans serif 字体，也是 Windows 的默认字体，当字体很小是不容易阅读），但是，苹果系统中没有这个字体，所以我们选择 Helvetica（和 Arial 很相似）作为第二备选字体，最后我们选择 sans-serif 作为第三备选字体，如果在一个既没有 Arial 也没有 Helvetica 的系统里，那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样，我们很大程度上保证了使用不同操作系统的访问者都能看到相同（至少是类似）的页面文字。

除了 Arial，常见的安全字体还有：

• Verdana 字体，它是微软公司的核心字体之一，专门为屏幕显示而开发的。它的应用广泛，宽度大而易于阅读，是显示器中最清晰的字体。CSS 写法：font-family: Verdana, Geneva, sans-serif;
• Times New Roman 字体，它是最常用的 serif 字体，是浏览器默认的字体。小号字的易读性也很差。CSS 写法：font-family: ‘Times New Roman’, Times, serif;

有兴趣的读者可以通过这个链接来查阅常用的安全字体。http://www.w3schools.com/cssref/css_websafe_fonts.asp

在网页开发中，应该尽量使用安全字体，也就是高度通用的字体，这样，访问者才能流畅的阅读网页的所有内容。

但是，网页设计师一定不会满足于使用这些安全字体，如何才能使用漂亮的字体，并能在普通用户的浏览器中被正确的渲染出来？答案是：使用@font-face 方案。

serif
serif 中文翻译为“衬线字体族”。
serif 具有末端加粗、扩张或尖细末端，或以实际的衬线结尾的一类字体。
可以看出 serif 总是在文字末端做文章，这样做的目的是增强可读性，也就是说在字号比较小的时候，serif 一族的字体仍然是比较好辨认的。
serif 典型的字体有：Times New Roman、MS?Georgia、宋体……
serif 还可衍生出两种字体族：petit-serif（小衬线字体族（末端变化不明显））、slab-serif（雕版衬线字体族（末端变化非常明显））。由于显示器显示的字都不大，所以一般将小衬线字体族看作无衬线字体族，比如其中的黑体。

sans-serif
sans-serif 中文翻译为“无衬线字体族”。sans- 前缀是法语，发音为 /san/，意为“无”。
sans-serif 字体比较圆滑，线条粗线均匀，适合做艺术字、标题等，与“衬线字体”相比，如果字号比较小，看起来就会有些吃力。
sans-serif 典型的字体有：MS?Trebuchet、MS?Arial、MS Verdana、幼圆、隶书、楷体……

cursive
cursive?中文翻译为“手写字体族”。
顾名思义，这类字体的字就像手写的一样。
cursive?典型的字体有：Caflisch Script、Adobe?Poetica、迷你简黄草、华文行草……

fantasy
fantasy 中文翻译为“梦幻字体族”。
fantasy 主要用在图片中，字体看起来很艺术，实际网页上用得不多。
fantasy 典型的字体有：WingDings、WingDings 2、WingDings 3、Symbol……

monospace
monospace 中文翻译为“等宽字体族”。
我们知道英文中各字母是不等宽的，但用 monospace，各个字母就是等宽的了，就可以像中文一样排版了。
monospace 典型的字体有：Courier、MS Courier New、Prestige……

总结
总的来说字体分为两个大类：serif、sans-serif，这两个大类下又可以分：cursive、fantasy、monospace