网页的字体选择很有讲究，因为它直接关系到用户的阅读感受。对于字体的选择，要做到字迹清晰、大小合适、粗细恰当，这样才能使文档便于阅读，让读者满意。在不同的环境下，字体的选择和字体样式的设计要求是不同的。本章就是介绍如何选择字体，以及如何设置有关字体的各种属性，以使一篇文章便于 阅读。
5.1 字体集选择font-family
属性值：字体名称 | 通用字体集,字体名称 | 通用字体集……
初始值：由浏览器决定
作用于：所有元素
是否继承：是
百分比值：不适用
计算值：指定的值
字体是人们对文字的第一印象。对于中文而言，常用的有宋体、黑体和楷体等；对于英文而言，可供使用的字体也非常多。
font-family属性用来定义一个或者多个字体集名称，在定义两个或者两个以上字体集名称的时候，必须用英文半角逗号分隔这些名称。有的字体本身含有空格或者其他符号，例如“Times New Roman”、“Lucia Consol”，则必须把这些字体名称用双引号
引起来。行内定义的时候在双引号中嵌套的双引号相应改为单引号。示例5.1就演示了这样的做法。
示例5.1
<style>
body { font-family: "Times New Roman", Times, Serif; }
</style>
<p style="font-family: 'Times New Roman', Times, Serif;">
示例5.2演示了两段对比文字，其中一段不设置任何字体，另一段针对<p>元素设置手写字体，效果如图5.1所示。
示例5.2
<html>
<head>
<title>CSS Demo</title>
<style>
p { font-size: 36pt;}
</style>
</head>
<body>
<p>There're thousands of fonts.</p>
<p style="font-family: script;">There're thousands of fonts.</p>
</body>
</html>
图5.1 设置字体样式的前后对比效果
针对一般中文系统而言，浏览器的默认字体为宋体，因此在第1段中文本显示为宋体的英文字母，而第2段设置了“script”字体，因此文本的外观有所改变。
一段文本应该设置多个字体名称，这样做的好处就是一旦有字体不可用，就可以使用紧跟的字体名称进行替代。例如示例5.1中，首选字体“Times New Roman”一旦遇到了意外情况不可用，此时第2个字体名称“Times”就顶替成为当前的字体。如果有更多的字体出现这种情况，则以此顺序类推。
在Dreamweaver 8中，可以很方便地选择一组字体作为字体样式，如图5.2所示。
图5.2 在Dreamweaver 8中定义一组字体名称列表
需要注意的是，有时Dreamweaver 8的预览窗口无法正确显示当前字体，如图5.3所示，设计者不必理会，只要在IE浏览的时候能够调试通过即可。
图5.3 Dreamweaver 8的字体预览显示有错误
上面的几个例子演示了定义特定字体名称的做法。另外，设计者有时候还可以定义通用字体集名称。
所谓通用字体集名称就是统一描述一类字体样式的名称，例如“serif（有边饰字体）”等，具体如表5.1所示。
表5.1 通用字体集名称
| 通用字体集名称 | 说 明 | 示 例 |
| serif | 有边饰字体 |
|
| sans-serif | 无边饰字体 |
|
| cursive | 卷曲字体 |
|
| fantasy | 花哨字体 |
|
| monospace | 独占位字体 |
|
其中这些关键字本身并不是某种确定字体的名称，例如serif有边饰字体就包括Times New Roman、Georgia等多种字体，sans-serif就包括Verdana、Arial等字体，因此浏览器在遇到字体集名称的时候，会自动从系统中寻找与之匹配的字体进行显示。
表5.2列举了与字体集相对应的字体。
表5.2 与字体集相对应的字体
| 字体名称 | 所属通用字体集 | 示 例 |
| Georgia | serif |
|
| Verdana | sans-serif |
|
| Monotype Corsiva | Cursive |
|
| Pristina | Fantasy |
|
| Courier New | monospace |
|
使用通用字体集名称的好处就是浏览器总能够从系统中找到与之相匹配的具体字体，而不必担心某种字体甚至备用字体都不可用。所以，设计者在定义任何字体的时候，最好在最后都加上一个通用字体集，以保证字体显示万无一失。
示例5.3演示了使用某种字体集名称定义字体的方法。
示例5.3
<html>
<head>
<title>CSS Demo</title>
<style>
body { font-family: Verdana, Arial, Sans-serif; }
</style>
</head>
<body>
<p>Here provides 2 font names and 1 generic font family.
</body>
</html>
有一点必须注意：不要定义访问者系统中不存在的字体。例如，在设计者的电脑中有一种叫做 “myownfont”的冷僻字体，在设计的过程中，设计者可以看到这种字体的显示效果，这是因为设计者电脑中已经安装了这样的字体。而其他访问者系统中并没有这种字体，浏览者打开页面看到的是用其他字体代替的文本。这样，就完全丧失了设计者最初设想的效果。
要避免这样的情况发生，首先应该尽量一次定义多个备用字体，一旦首选字体不可用，那么其他字体可以补充产生效果。
另外，设计者应该尽量使用Windows系统自带的字体，也就是说，一般在安装Windows之后，不再安装新字体。即使安装了新字体，也要坚持使用Windows原先的自带字体，这样才能保证对方系统能够看到自己的设计效果。
表5.3列举了Windows自带的常用字体，一般而言，这些字体样式已经足够日常制作网页使用了。
表5.3 Windows自带的常用字体
| 字体名称 | 说 明 | 效 果 演 示 |
| Arial | 无边饰、瘦长型字体 |
|
| Comic Sans MS | 无边饰、扭曲型字体 |
|
| Courier New | 有边饰、等宽字体 |
|
| Fixedsys | 无边饰、等宽字体 |
|
| Georgia | 有边饰字体 |
|
| Impact | 无边饰、瘦长型字体 |
|
| Lucia Console | 无边饰、等宽字体 |
|
| Microsoft Sans Serif | 无边饰字体 |
|
| Tahoma | 无边饰字体 |
|
| Times New Roman | 有边饰字体 |
|
| Verdana | 无边饰字体 |
|
| 宋体 | 有边饰中文字体 |
|
| 黑体 | 无边饰中文字体 |
|
| 隶书 | 有边饰中文字体 |
|
| 幼圆 | 无边饰中文字体 |
|
字体样式可谓五花八门，在其他字体集中，还可能由古体数字、小体大写数字、缩减或者扩展字母等样式，这些样式在当前版本的CSS样式表中是没有相应属性的。有关字体概念的综述详见5.7节的介绍。
2601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
