我的书签
添加书签
移除书签随着现代社会的发展，人们对沟通的需求越来越强烈，这也不断促进着文字处理应用程序的创新和进步。当然，也正是得益于这些文字处理技术的不断发展，我们才能更好地传递思想，描绘事物和抒发情感。
任何对网站开发有亲身体会的人都会深知字体排印技术在网络环境中所面临的困境。不过这也从另一方面促使我们去完善和发现新的字体排印技术，并找出描述字体的形状、样式、色深和粗细的更好方法。我们希望本章中对字体排印（typography）的介绍能帮助你更好地理解网页中处理文字的技术。
Ryan Sims，设计师
www.csszengarden.com/085
用简单的字体造就恒久之美
Oceans Apart中绚丽的色调取材于Ryan Sims在加州南部拍下的照片，作品中宁静优雅的色调勾勒出了引人入胜的神秘之海的意境。
秉承简约的理念，Oceans Apart中不带有任何唐突和喧嚣的部分。作者剔出了作品中一切哗众取宠的元素，彰显出他所恪守的海明威式哲学。而这部作品中的美绝非来自浮华的修饰，而是源于无处不在的简约和质朴。
5.1.1 字体排印学的基础知识
我们知道，字体排印学是设计学中的一个非常特殊的领域。许多设计师毕生致力于学习和使用排印技术，并且不断创造新的排印方法，才最终造就了这个领域现今的成果。虽然设计领域现有的经验有足够的可选排印技术，因而我们并不需要将自己培养成专业的排印师，但那些相关领域的基础知识却是任何一个设计师都需要了解的。
1.字体格式
字体格式（type form）指的是字样（typeface）表现出的粗细、宽度和姿态（posture）等特征。
字体粗细指文字笔画的宽度。在CSS中其对应的属性是font-weight，该属性用来设置文字表现出的粗细。表5-1-1列举了font-weight属性和其可选值。
表5-1-1 CSS中的字体粗细
在这里需要注意的是有些字体并没有粗细适中的字样，因而它们并不能提供和CSS中等同的粗细划分（图5-1-1）。而事实上，即使字体有足够多的粗细划分，浏览器也未必能找出最合适的字样。
图5-1-1 在没有可用的中等粗细字体的情况下，浏览器会尽可能显示出相近的字体，一般均为normal或者bold
比较现实的做法是仅仅依赖两种设置：normal和bold。图5-1-1是Mozilla对各种粗细设定下同一字体的显示，可以看到Mozilla中的确只用到了normal和bold两种设置。
字体宽度指字符的宽度。紧缩字体会显得更为狭窄，而扩张字体则显得宽大（图5-1-2）。CSS中对应的属性是font-stretch，不过这个属性却尚未被任何浏览器所支持。
图5-1-2 同一字体的紧缩、正常和扩张显示
另一个字体格式是姿态，与之对应的CSS属性是font-style。所谓的字体姿态实际上是指字体的倾斜程度。姿态有两种。
□ Italic——一种在常规字体基础上做过特殊设计的变体，一般带有手写风格。
□ Oblique——常规字体由浏览器作倾斜处理后的版本。和italics不同的是，oblique字体并不出自另外设计的变体，而仅仅是常规字体应用倾斜效果的结果。而多数人则错把oblique字体说成italic字体。
font-style属性的合法值有normal、italic、oblique和inherit。
Note
如字体设置了bold、italic或者oblique等属性，浏览器一般都会首先尝试选择真实存在的衍生字体。若衍生字体不存在，浏览器就会调整常规字体，让它显示为bold、italic或者oblique等样式。真实字体和自动调整形成的字体在视觉上有明显的区别，有经验的设计师能很快区分它们。
2.字体对比度
字体对比度（type contrast）指字型中粗的部分与细的部分之间的差异程度。不同字体的对比度相差很大，甚至有些字体没有任何粗细变化。
在印刷作品设计中，人们经常用一种字体撰写标题，而使用另一种不同的字体撰写正文。通常做法中，圆滑、缺乏粗细对比的sans serif字体被用作标题用字，而serif字体则常用作正文字体，这种设定在长段文章中的应用尤其广泛。你平日阅读的书籍大多沿用了这种设计方式，不过这种传统在当今的Web时代却受到了很大的质疑。
3.字体色深
字体色深（type color）指的是文字的深浅程度。例如Helvetica Light这样的字体相对较浅，这是由于此类字体较细因而含墨量较小。而Cooper或者Arial Black这类字体的含墨量就很高，因而显得重而深。当然，字体色深也不完全依赖于字体本身，其他因素如字距调整（kerning）、字间距（tracking）和行间距（leading）等也会影响人们感受到的字体色深。
除了对比度外，字体的颜色也至关重要。例如，字体色相（type hue）的不同也能造成字体的差别，这又给设计师带来了更多选项。
不过需要提示的是，通常情况下设计师都将作品中颜色的数量控制在一定范围之内。虽然诸如儿童主题比较适合加入多种颜色，但绝大多数情况下，在页面上使用过多颜色都会让人感觉不够专业。
Note
在网络上，很多人的想法恰恰相反，他们认为在显示器上Sans serif字体更适合作为正文字体，这也引发了一些争论。若想了解更多关于这类争论的信息，请参考www.digital-web.com/news/2004/06/serif_vs_sanserif。
5.1.2 Oceans Apart中的字体
在Oceans Apart中，我们可以看到Sims清晰而简洁的用字逻辑——所有的HTML中的文字都使用了Trebuchet字体，而备用字体也使用了几种sans serifs字体。
body {font: 11px "trebuchet ms", arial, helvetica, sans-serif;}
Trebuchet本身也是一种sans serif字体，而且它还是Microsoft核心Web字体的一员，此外，Microsoft Office中也包含了这种字体，因而我们可以认为多数系统都能支持Trebuchet字体。但可以注意到，细心的Sims并没有遗漏设置备用字体这重要的一环。
1.色相和对比度的选择
对色相与对比度的选择至关重要，因为它不仅仅关系到设计的一致性，还直接影响到作品的可读性。
传统的文字设计理论认为提高前景和背景的色相对比——例如使用白底黑字的设计——会大大提高文本的可读性。
但在Oceans Apart中，Sims却抛弃了传统规则的束缚，使用了相对并不显眼的浅褐色作为正文字体：
color: #9F927F;
可以看到，这样的文字和白色的背景的对比度很低（图5-1-3）。而作品中无论正文部分还是侧栏中的链接都使用了深蓝色，这一点很值得玩味，因为多数设计师都下意识地选择纯蓝以提高对比度（图5-1-4）。
图5-1-3 作品中使用了对比度较低的文字
图5-1-4 使用蓝色字体未必能增强整体对比度
不可否认，使用纯蓝色能提高对比，但事实证明使用不显眼的褐色反而带来了更吸引人的效果——正是使用了褐色的正文字体，才使得页面显得更加柔和清晰，进而让读者能更好地阅读其中的内容。
而将蓝色用于链接则提高了作品整体的对比，增加了作品的视觉冲击力。
对比效果在作品头部的应用也十分突出：顶部图片上的文字使用了反差强烈的白色调（图5-1-5），而图片下的描述性文字则置成了和褐色背景相异的白色，这大大增强了作品的整体视觉效果（图5-1-6）。
图5-1-5 作品头部图片中使用的对比技巧
图5-1-6 头部图片下的文字
2.字号对比和字体颜色
使用不同大小的字体可以增加文字区块间的对比。在Oceans Apart中，这种使用简单的效果却非常有效。
Tip
毋庸置疑，低对比度的字体会造成视觉不便人士阅读困难。因而在制作受众面较宽的公共网站时，使用传统的高对比度设计依然是最好的选择。
可以看到，作品中正文和链接列表的一部分使用了11像素字体，链接列表中另一部分链接则使用了9像素字体作为辅助。图5-1-7中我们可以看到，这区区两个像素的差异却造成了相当强烈的视觉对比。
图5-1-7 两个像素的差别导致了超乎预期的对比效果
另外，Sims还在#linkList2中使用了橄榄绿色，这种色彩不但被链接列表的背景清晰地反衬出来，也同时和页面其他部分的蓝色、褐色形成了鲜明对比。
3.字号对比和粗细
再回到图5-1-5中的头部图像，就会发现图像中同时使用了字号和粗细变化来增加对比度：“css”使用了小写，从而和首字母大写的“Zen Garden”形成了对比，而在其下的“the beauty of css design”则特意将“beauty”加深为粗体，这又和周围的常规文字形成反差。
再看头部图片下方的文字，它们也使用了相同的技巧——前7个单词置为粗体，而后续单词都为常规粗细（图5-1-7）。
4.标题和正文的关系
作品中最后一个亮点是正文和标题的关系。仔细观察可以发现，正文部分标题使用了图片，而不是简单的HTML文本，这为加入细微的文字阴影提供了坚实的基础，而经过阴影润色的文字毫无疑问将更加吸引眼球。
谈及吸引眼球之处，设计中还另有一处与众不同的地方——链接部分的标题（图5-1-8）。这些标题的文字全部使用了大写、深蓝的字体，它们和浅蓝底色与褐色整体背景形成鲜明的对比，很好地凸现了链接区域的导航作用。
图5-1-8 大写的标题在整部作品中显得特别突出
5.1.3 从简洁设计中学习
初见Oceans Apart，人们都会陶醉于其自然、平和却略带变化的简洁风格中。而作品字体运用中所触及的细微变化手段或许是我们更应该仔细学习的地方。
Shaun Inman，设计师
www.csszengarden.com/044
应对字体的困扰
Shaun Inman在制作si6的过程中采用了一种特殊的网格化布局。这种网格式的布局在作品中形成了潜在的视觉边界，从而将页面水平划分为3栏。而文字间黯淡的线条则又将左侧的标题和中部的正文区域分割成多个部分。
在这部作品中，字体被细心地调整为和周围装饰线条相称的样式。使用这样的像素级的字体能较好地将作品中的线条与文字融合，不过这种方法也存在缺点。例如，用户可能因文字过小而手动改变浏览器字体大小，导致预定的字体与线条间的比例遭到破坏。
5.2.1 字体选择的限制
或许网站设计中最让人头疼的问题就是字体选择，因为用户可以随意更改计算机的字体库，而那些通用的字体又少之又少，因而设计师很难确定究竟哪些字体才可以使用。更让人沮丧的是，在未来的一段时间内，字体选择中面临的这个问题仍不大可能被完美解决。
我们知道，除了Flash之类的内嵌字体媒介，或者图片对象之外，所有站点文字都依赖于用户本地安装的字体。而由于用户并非设计师，他们所安装的字体非常有限，且很大程度上用户拥有的字体取决于他们的操作系统和相关安装的软件，例如，Microsoft Office用户会比非Office用户拥有更多的Office中捆绑的字体。
如果考虑操作系统的因素，我们会发现Windows和Mac OS X默认安装的字体并不一致，但还是可以从中发现一些共有的字体。可若是加入了Unix和Linux，情况就会变得更加难堪——我们几乎无法找到在Windows、OS X和Unix/Linux平台中共有的字体。表5-2-1列举了每个平台自带的字体。
表5-2-1 常用的Web字体（按操作系统平台分类）
Tip
微软公司为其旗下产品所附带的字体给出了一个列表。由于用户可以自行删除已安装的字体，或者选择不安装某些附加字体，因而我们并不能假定用户必然会全部拥有这些字体。
Tip
从2001年开始，有人为Web上的常用字体展开了一个调查。尽管调查的结果存在着一定不确定性而不完全可信，但至少可以作为一个参考的依据。关于这个调查的更多信息，请参 考 “ Code Style font sampler”（http://www.codestyle.org/css/font-family/）。
1996年微软公司专为屏幕显示发布了一系列的字体。之后，这些被称为核心Web字体的资源在网络上广为流传。如今它们已经被包含在微软的各种产品中。表5-2-2列举了这些核心Web字体。
表5-2-2 微软核心Web字体
通常情况下，使用这些字体都是安全的。但这只是通常情况——仍然会有未安装这些字体的用户，因而这也不过是相对而言的安全。正是为了处理那些例外的情况，CSS标准中才引入了备用字体的机制。
5.2.2 通用字体族
例如在si6中，Inman最初设定的字体为Mac OS X平台上的Geneva，但是考虑到这种字体在Windows 平台上未必存在，所以最终加入了额外的备选字体如下：
body {
font: 9px/16px Geneva,Arial,Tahoma,sans-serif;
}
这段声明中的前两个值将字体大小设为9像素，将行高设为16像素，而后按次序设置了备选字体（图5-2-1）。这样，如果浏览器找不到Geneva字体，就会去寻找Arial字体，若无法找到Arial字体，则会去寻找Tahoma字体，如果连Tahoma字体也无法找到，那它将使用浏览器中sans-serif（无衬线）字体族的默认字体。
CSS内置了一系列的字体族，而所有CSS兼容的浏览器都能自动为每个字体族找到至少一个合适的默认字体（当然，用户也可以覆盖默认设置）。CSS并没有要求我们一定要在字体设定时设定一个字体族作为最后的备选字体，不过这样做却可以防止浏览器在没有匹配的情况下选择其默认的Times New Roman字体。
下面列出了所有的通用字体族并加以解释。
Note
遗憾的是，从2002年开始微软公司就取消了官方提供的核心Web字体下载。
图5-2-1 si6中的文字在（自上而下）Geneva、Arial和Tahoma下的显示
•serif
serif（衬线）字体都有明显的装饰衬线，所以在字母笔画的结尾处大都能看到细小的衬线（图5-2-2）。Times New Roman是默认的serif字体，除非用户特意改变默认设置。
图5-2-2 serif字体：Times New Roman、Georgia和Garamond
• sans serif
sans-serif（无衬线）字体相对serif的区别是它没有装饰衬线（图5-2-3）。Arial是默认的sans-serif字体。
图5-2-3 sans serif字体：Helvetica、Futura和Lucida Sans Unicode
•monospace
monospace字体的每个字母都有相同的宽度（图5-2-4）。因而在monospace中字母“i”的宽度和字母“m”的宽度是相同的。这类字体在显示程序代码时特别有用。Courier（或者Courier New）是默认的monospace字体。
图5-2-4 monospace字体：Courier、Monaco和Andale Mono
•cursive
cursive字体模仿手写的风格，通常用于标题（图5-2-5）中。从名字可以知道cursive多数为草体，但事实上各类手写字体都属于cursive范畴。cursive字体族没有默认的字体，不过最常用的莫过于Comic Sans了。
图5-2-5 cursive字体：Comic Sans、Apple Chancery和Brush Script MT
•fantasy
fantasy则完全是装饰用字体，多数用于标题（图5-2-6）。由于fantasy字族拥有太多的字体，几乎无法为这类字体的大小形状下一个定论，因而也很少有人会在正式的站点设计中使用它们。
图5-2-6 fantasy字体：Impact和Papyrus
5.2.3 传统虽好，但是……
现在假设被迫在每4个网站中的3个里都使用Verdana和Georgia字体，那么选择一种多数用户没有的字体一定会是件很有趣的事情。由于可以为多数用户设定备份字体，你可以安全地设置特殊字体以拓展新的交互体验。
下面的字体组合都是将相对特殊的字体放在最前，随后是安全的备份字体：
body {
font-family: "Lucida Grande", "Lucida Sans Unicode",
Verdana,
sans-serif;
}
h2 {
font-family: Garamond, "Times New Roman", serif;
}
dt, li {
font-family: Optima, Arial, sans-serif;
}
.sidebarCallout {
font-family: "Century Gothic", Verdana, sans-serif;
}
之前我们看到Inman将Geneva字体作为了站点的首选，同时将Arial和Tahoma作为备份。通常来说，这是一种很好的组合，因为这3种字体都有相同的x-height。这里需要谈及x-height，在Rob Carter、Ben Day和Philip Meggs所著的《Typographic Design:Form and Communication, 3rd ed.》（2002年由John Wiley & Sons出版社出版）一书中，将x-height定义为“小写字母去除高出部分1和低出部分2后的高度，而通常就是小写的x字母的高度”。拥有相同x-height的字体往往具有较好的相似性。
注释：1 例如，字母“d”上面的出头部分。——译者注
注释：2 例如，字母“y”下面的钩。——译者注
可能已经注意到，即便设置了相同的像素值，一些字体还是显得比其他字体更大。例如（图5-2-7）中，16像素的Verdana字体就比其他字体更大些。因而在设置字体组合时，需要记住font-size对所有字体的作用都是相同的。因而如果使用了一种x-height较大的字体，那在用户看来这个字体会显得比其他字体略小些。所以我们必须事先在各种平台和浏览器上进行足够多的测试。
图5-2-7 在16像素下，不同字体有不同的x-height。注意列表顶端的字体和底端字体的尺寸差异
1998年，CSS2引入了一个新的属性font-size-adjust，用以解决x-height差异。但是这个属性至今尚未被广泛地实现，所以在CSS 2.1标准中，甚至干脆删除了它。或许在CSS规范最终完成之后的某天该属性会被广泛支持，但就目前来说，我们还是应该避免使用。
5.2.4 字体选择
由于用户安装的字体千差万别，我们无法预知用户所见文字的真实样式。因而现实中某些用户看到的文字形象与设计师看到的可能截然不同。
但这并不成为我们永远使用Arial字体的理由，字体的运用是一个创新和突破的过程。从Shaun Inman的作品中，我们也能看到突破核心Web字体束缚后作品效果所得到的显著增强。
Didier Hilhorst，设计师
www.csszengarden.com/035
适应文字大小的变化
Didier Hilhorst的Release One堪称禅意花园的又一力作。这次他使用了和以往类似的创作流程，同时也充分地考虑了禅意花园的受众（网站设计师）、作品要求（正确的代码、完美的设计）和竞争力（其他主要的设计站点），最终完成了这部杰出的作品。
为了使Release One成为禅意花园的另一部标志性作品，Hilhorst特地为作品制作了很多与众不同的元素，例如圆形的站点LOGO象征着高雅的雏菊（图5-3-1），再配以明亮的绿色和橙色作为前景和柔和的灰色调背景，最终营造出一种独特的设计风格。
图5-3-1 别具一格的禅意花园图标
5.3.1 字体大小
虽然书本的印刷和屏幕上的显示有一定差距，但我们还是能够发现Release One中的字体显得很小。查看样式表其可发现其中的原委：
p {
font-size: 11px;
text-align: justify;
}
quickSummary p.p1 {
font-size: 9px;
background: transparent;
color: #999;
text-align: left;
}
这些样式限制了作品中最大的字号不会超过11像素，而有时甚至只有9像素。由于网页中大号字体的显示效果较差（12像素以上的Verdana显得尤为丑陋），网站设计师往往更倾向于小号字，而小号字也意味着同样的空间可容纳更多内容——这也成为了使用小字号的另一个原因。当然，设计师对小号字的偏好并不意味着普通阅读者也能接受，在这里我们只能期望用户不觉得反感。
5.3.2 浏览器的控制
所幸的是，浏览者还有另外的选择——主流浏览器都允许用户手动缩放字体到他们满意的效果。在多数浏览器中，这种功能位于View菜单中，你也可以使用Ctrl++（加号）或者Ctrl+-（减号）来缩放字体。
若是仅依靠这种功能就能达到目标，那本节的内容就可到此为止了。事实并不那么乐观——要知道，以像素为单位的字体在Windows平台上的IE中不能用前面所说的方法改变大小！
5.3.3 绝对单位和相对单位
在CSS中，绝对单位指预先可以确定单位长度的度量单位，它包括cm （厘米）、in（英寸）和pt（磅）等。它们中的每个都和真实世界中的长度对应，也可以将2.5厘米和1个半英尺做比较。
而相对单位则包括%、em、larger和smaller等，这是一种可变的尺寸。2em和200%是1em和100%的两倍大。但有一个疑问：1em究竟有多大，或者说100%是什么的100%呢？实际上，每个相对单位都和一个初始长度相关，但由于这个初始长度也是可以变化的，所以1em既可以定义为3英寸也可以定义为0.55厘米。
使用相对单位意味着存在一个默认的基值，也就是1em或者100%时的大小，然后再按照当前值成比例地缩放字体。比如页首标题可以设为150%或者2.2em，次要标题可以设为0.8em或者75%。这个基值可以自定义或者使用浏览器的默认设置，浏览者也可以手动改变字体大小，进而让页面文字自由缩放。用户可控的字体缩放是使用相对单位的一大优势，如果计算机未开启Windows XP的ClearType（字体清晰）功能，将发现Release One的字体小得几乎无法阅读，因此手动缩放功能的重要性不言而喻。
第三种单位类型是描述字体大小的关键字，它的合法值包括xx-small、medium和x-large等。在CSS的定义中，它们也属于绝对单位，但实际显示大小却都不是那么精确。
Note
如果使用Mac OS X或者Windows XP（且已经开启ClearType功能）这类带有字体平滑功能的操作系统，那辨识Release One中的文字还不算太困难（图5-3-2和图5-3-3）。但如果操作系统没有这类功能，就不得不使用额外的辅助工具来阅读作品中的文字了（图5-3-4）。因为只有一部分字体（例如Verdana）在小字号情况下才能较为清晰的显示。
5.3.4 像素及其导致的问题
根据CSS的定义，px实际上是一个相对单位。这其中有一长套冗长、模糊、视觉距离、视角等复杂概念的理论。不过一个较容易理解的例子就是， 1280×960分辨率的15寸显示器上的1px比800×600分辨率的21寸显示器上的1px要小得多。由于10像素在后者中显示得足够大，而在前一台上却小得几乎无法分辨，因而我们不能说像素是个绝对单位。
那如果像素是个相对单位，用户是否就能手动调整像素字体的尺寸呢？事实并非如此，Windows平台上的IE浏览器就缺少这种功能，这意味着在IE中，像素事实上被作为绝对单位来处理。那是不是说我们只能用em或者%来满足手动缩放？别高兴得太早了——相对单位也没有我们想象中那么理想。
图5-3-2 Mac OS X的字体平滑功能使得Release One中的文字在较小情况下也能正常分辨
图 5-3-3 Windows XP的 字 体 清 晰 功 能（ClearType）甚至在更小的字体下也能清晰显示
图5-3-4 Release One在不使用ClearType功能时几乎无法阅读
1.起始值
应该还记得，前面提到相对单位都存在一个基值。但是如何设定这个基值呢？可以依靠浏览器的默认值吗？答案恐怕是不能的，要知道浏览器的默认为16像素字，这对多数人都显得太大了。
2.不一致性和舍入误差
如果可以撇开浏览器兼容问题，那或许可以依赖浏览器的默认基值。但事实上由于操作系统和旧式浏览器的差异，同样的16像素默认字体，在各种浏览器所显示的实际效果却大相径庭。设计师Owen Briggs在数年前作过一项测试，他抓下了100多张不同环境下浏览器对16像素字的显示图像，结果发现要找到不同浏览器中的最终显示尺寸的关系几乎就是痴人说梦（图5-3-5）。而使用CSS关键字也有同样的问题。因而在很长一段时期内，没有人敢于使用相对的字体大小——1个em可能被显示为12像素到16像素之间的任意大小。
图5-3-5 Owen Briggs的屏幕截图的一部分，可以到各种浏览器下的16像素字尺寸相差很大
我们先前说到的还只是基值问题，字体缩放同样也存在问题。倘若某浏览器将1em显示为16个像素，0.9em又会有多大呢？答案是有些浏览器或许会把14.4像素截取为14像素，而有些却会舍入为15像素！
3.相对单位的组合
若是使用相对单位不当的话，很有可能会把作品赶入死胡同。考虑下面的代码：
<div id="benefits">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and
a resource we can all refer to when making the case
for CSS-based design. This is sorely needed, even
today.</p>
</div>
如果应用下述的CSS样式，假设100%大小是16像素，段落的字体又会有多大呢？
benefits {
font-size: 75%;
}
p {
font-size: 75%;
}
Tip
更多关于Owen Briggs的测试结果请参考“Text Sizing”（http://thenoodleinc ident.com/tutorials/box_lesson/font/index. html）。
答案是12像素还是9像素呢？由于第一条样式将#benefit中的字体降至75%（12像素），而第二条样式又将12像素降至75%，所以正确的答案是12 75% = 9像素。
设想若不对作品做仔细检查，那这种组合方式将导致无法预测的后果——可能由于多次的收缩导致文字小得无法阅读。在那些较老的浏览器，如苹果机上的IE中，后果更加糟糕（图5-3-6和图5-3-7）。
图5-3-6 文字在现代浏览器中的大小较为合理
图5-3-7 由于组合原因，文字在旧式浏览器中变得难以阅读
5.3.5 合理地设置字体大小
所以无论何种方式，字体大小的设置过程中总会有些令人不快的问题。那设计师应该如何处理呢？似乎使用像素值是一个代价最小的方案，但这会让用户遇到太多的不便。所以下面介绍3种常用的解决方案，当然它们中的每一个都各有优劣。
1.使用em
在Owen Briggs完成了测试之后，他发现了使用百分比的方式能够避免很多舍入误差。因而在对body元素应用了百分比单位后，我们就可以为其余元素使用em值。使用这种方式，字体的一致性相当不错：
body {
font-size: 76%;
}
p {
font-size: 1em;
}
Briggs建议不要将文字大小设置为1em以下。那上述设置将导致p元素中的文字大约为12像素大小（假定浏览器默认16像素字）。这对于多数浏览者都是相当舒适的字号，同时也允许他们手动改变字体大小。具体的em方法的介绍可见Briggs的个人站点中的“Sane CSS Sizes” 一文（www.thenoodleincident. com/tutorials/typography/index.html）。而这个方案的唯一缺点就是它假定了所有浏览器都使用16像素为默认字号。尽管多数浏览器都是这样实现的，但若使用户悄悄改变了默认设置，那自然会导致问题。
Tip
互联网上有相当多关于文字大小的指导。例如MaxDesign（www.ma xdesign.com.au/presentation/relative） css - discuss（http : / / css -discuss.incutio.com/?page=FontSize），以及Dive Into Accessibility（http://diveintoa ccessibility.org/day_26_using_relative_fon t_sizes.html）等。
2.使用关键字
在使用字号关键字时，最容易出现问题的浏览器就是Windows平台上的IE 5，而在其余浏览器中都能很好地显示。因此，我们可以使用盒模型hack为Windows平台上的IE 5设置不同的字号值，这样即可正常使用CSS 字号关键字：
body {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
} html>body {
font-size: small;
}
每个关键字之间的缩放比是1.2，所以如果medium的值为16像素的话，上述代码将让body中字号为13像素。
3.使用样式切换方法
如果要精确控制屏幕上文字的大小，px是最为可靠的单位。可是因为IE的缘故，我们并不能依赖px，但仍可通过另行制作显示大号文字的样式表来解决IE中的这个问题。
对于某些浏览器来讲，切换样式表的功能是内置的，但这类浏览器中却并没有IE的身影。所以为了让用户可以切换文字大小，在页面中我们还必须加入相应的控制脚本。Paul Sowden在A List Apart上曾写过一个有名的实现方法。显然，除了用于字体之外，这种方式也可以用来处理各种其他类型的设置切换。
Note
盒模型hack技术修正了Windows平台上的IE 5中的盒模型问题，可以解决器中存在的一部分样式问题。这个hack也能被扩展于处理字体大小的设置。若想了解更多的相关信息，请访问http://tantek.com/CS S/Examples/boxmodelhack.html。
Note
关于左边的代码的详细解释，请访问Dive Into Accessibility网站上的相关文章（http://tantek.com/CSS/Examples/boxmod elhack.html）。
Note
Paul Sowden的方法可以在“Alternative Style: Working with Alternate Style Sheets”（www.alistapart.co m/articles/alternate）这篇文章中看到。
5.3.6 选用何种方法
那我们在网站设计中应该如何选择呢？这取决于个人喜好。虽然普通用户大都不会拥有Didier Hilhorst之类图形设计师那样的好眼力，但只要我们合理地运用的字体大小，还是可以很容易地满足他们的需求。
Michael Pick，设计师
www.csszengarden.com/009
设计优雅、带有“重力感”的文字
在考虑提交何种类型的作品时，Michael Pick突然想到了一个有趣而古怪的念头，并跟随着这个奇怪的想法完成了他的Dead or Alive。
Pick的创意是将西方古朴的风格和日本武士道相结合，营造出令人着迷的历史反差感。为了引入西方古典派的主题，Pick使用了带有强烈西方风格的字体，并加以额外的润饰。最终完成的作品同时具有东西方双重风格，给人们带来了深刻的视觉印象。
5.4.1 装饰性元素
Dead or Alive中最引人瞩目的莫过于其中的装饰字体，也就是我们所知的符号（dingbat）字体。这是一种图案状的、起装饰作用的字体，它通常可分为如下几类：
□ 商业
□ 体育
□ 动物
□ 自然
□ 创意/不规则元素
图5-4-1中列举了5种常用的符号字体
图5-4-1 符号字体往往遵从某种主题
Pick在Dead or Alive中通过使用符号文字拓展了作品中的西式风格，进而创造了复杂而完整的视觉形象。
作品中第一处使用符号字体的地方是它的图标（图5-4-2）——在一系列西式字体的衬托下，一张日式阁楼的照片被置于椭圆的框架之中，周围同样环绕着西式的花体装饰图样，既凸现了东西方风格的差异，同时也确立了整个作品的形体风格。
图5-4-2 Dead or Alive中装饰效果极强的LOGO
而在其下的五星徽章也是西方人熟悉的视觉符号。在各个链接列表中，标题都点缀了五星符号和符号字体组成的分隔条（图5-4-3）。
图5-4-3 链接列表中的标题用五星和符号字体组成的分隔条装饰
若将视线移至设计的主体，我们还可以发现一些更加有趣的元素——两名日本武士和一坐日式盆景居然变成了标题上的装饰（图5-4-4）。
图5-4-4 最上端的标题装饰有武士和盆景的形象
在随后的标题中，西方样式成为主导，我们可以看到正文的多个标题都使用了人们熟知的手指符号（图5-4-5）。
图5-4-5 段落标题使用了西式风格
另外的两处装饰是在作品的顶部和底部类似钱币纹理的图样（图5-4-6）和一个写有“mikepick.com”的邮戳（图5-4-7）。
图5-4-6 重复的图样带来了很强烈的视觉吸引力（图像已被放大）
图5-4-7 邮戳体现出水印效果（图像颜色已被加深）
若是没有了装饰和符号的恰当运用，要体现出这部作品的独特风格将会变得很困难。而恰如其分的修饰点缀也的确在强化这部作品的设计效果和传达作品理念中起到了独到的作用。
5.4.2 文字排布
文字排布和页面元素的位置关系密切，先前我们已经有了很多相关讨论。不过在视觉元素布局的发展过程中，还有着更多科学理论和奇闻轶事。
1.视觉行为
研究表明，人类眼睛使用非常特殊的方式进行阅读。因而排版专业人员推荐我们遵循人们的阅读方式进行页面布局（除非你要实现的是一种错乱的风格）。
在从左向右阅读的语言中，人们遵循一种特殊的模式阅读文字，这在纸面和网页设计中都是一样的。
排版的主流理论认为人类视觉会自然地偏向于页面的左上角，也就是所谓的视觉中心区。之后视线可以顺畅地向右移动，或是转向新的一行，这样逐渐趋近于页面底端。在这个过程中，视线会将页面的底端作为最终的停靠点。在日常的设计中，设计师们都会遵循上述视觉原理（图5-4-8）。
图5-4-8 人们浏览页面时的视觉行为
Note
在非自左及右阅读的文字，视觉的行为是不同的。例如希伯来文和阿拉伯文是两种自右至左阅读的文字，这时视线一般都会从右上角开始，并逐渐向左侧和下方延展。
2.使用“引力感”来引导视线
视线被吸引的现象被形象地比喻为“引力”。就如地心的吸引作用那样，视线也会自然地被作品的布局导引。
因此，将重要的站点标志放置于视觉中心区，而把文字等其他元素置于页面下部形成停靠点的设计规则是非常合理的。而视线从右方转向左侧时形成的折点通常也是较易被浏览者关注的地方。于是我们可以得出如图5-4-9中所示的理想化的站点模版，这和Dead or Alive中遵循的规则完全一致。
图5-4-9 根据视觉行为得出的页面模版
5.4.3 避免产生理解上的5.4.3 问题
排版中的另一个问题是如何保证人们能正确理解文字所传达的消息。当然，对那些专注于图像而不是文字的实验性作品还需另当别论。
1.标题文字
标题文字用来指明段落的主要内容。如Dead or Alive中，标题的样式用于向浏览者传达作品的含义，同时也能起到强化作品整体效果的作用。
下面是一些关于处理标题的指导意见。
□ 标题中使用的颜色必须是整个设计中较为强势的色彩。
□ 标题的色彩必须鲜明。研究表明，在标题中亮色所带来的影响不如暗色。因而越是接近黑色的标题，越是能对浏览者产生强的冲击力。
□ 越是重要的标题，越是需要带有强烈冲击力的色彩。
□ 略为紧缩的字体更能凸现标题。所以设计师建议使用正常字体70%～90%宽的标题文字。
□ 字体对比可以帮助增强标题效果。例如Dead or Alive中标题都使用了大写文字以区别于普通文字。
□ 标题长度应该有所限制。过长的标题在视觉和理解上都容易让读者迷惑。
在标题设计中另一个有趣之处是标点的作用，尤其是句号。通常情况下，应该避免在标题中使用句号，因为句号用来结束一段文字，而标题则是用来引出下面的内容文字（图5-4-10）。
图5-4-10 除了此处的问号，Dead or Alive中的标题中都不含任何标点。而手指的图标则指引读者继续阅读余下的文字
2.正文字体
正文是页面文字的主体部分，浏览者会仔细阅读，或者至少扫过正文中的文字。而不恰当的排版布局将可能错误地传达文字要表示的信息。
以下是关于正文布局的一些建议。
□ 保持一行在60个字符以内。虽然在流式布局的网站设计中（尤其是CSS中问题百出的min-width和max-width属性）很难控制每行字数，设计师仍应将这条规则牢记在心。因为过长的一行文字不但会让读者难以理解，甚至会使其根本不愿阅读下去。
□ 避免每行字数过少。如果将段落分布于20字的短行中，将导致行数激增，而过长的段落往往同样是人们所无法忍受的。因而最好只在需要强调的文字中使用短行。
□ 英语书写的传统认为一个段落至少应由3到4句话组成。然而在Web中，过长的段落却不被看好。较短的段落在快捷的网络时代更适合迅速传达重要的讯息。
□ 如果确实需要发布长篇文字，就得尽力让段落保持小巧，并且将长段分割为节并加以标题。这才能更好地引导读者，以便正确地理解文字。
□ 若段落之间的距离过大，读者在阅读时会有被打断的感觉，造成不必要误解。
□ 避免在正文中使用鲜艳的色彩。与标题一样，鲜艳的色彩在正文中往往会造成负面影响而不是正面的帮助。我们应该只在重点文字和链接上使用鲜艳色彩。在Dead or Alive中，唯一的色彩变化应就在正文的链接上（图5-4-11 ）。
图5-4-11 Dead or Alive中正文链接的色彩变化
3.重要文字
相对于标题和正文来讲，重要文字显得更加灵活，当然，它们也会对帮助读者理解文字内容起到相当大的作用。一般来说，重点文字指的是侧栏、引用和说明部分的文字。在处理重要文字时，我们要注意以下几点。
□ 由于重要文字的目的是引起读者的注意，因此为重要文字应用鲜艳的色彩自然没什么问题。但必须保证所有重要文字的色彩保持统一。
□ 重点文字应当使用短行，且只能有很少的行数。
□ 重点文字不应阻断正文，而应增强正文的效果。如果重点文字扰乱了读者的视觉流向，那也会影响到读者对页面内容的理解。页面插图同样也应遵循这条规律。
□ 读者都希望插图附有相应的说明。说明文字能为插图提供上下文，起到帮助读者阅读的作用。
文字排布中另一个涉及可用性的问题是页面中能够容纳多少文字。虽然大多数用户不喜欢点击“下一页”按钮，但若是文字实在过多，设计师还是需要考虑适当地对内容分页。
5.4.4 仔细的排版，优雅的设计
Dead or Alive是一部相当优雅的作品，它的优雅来自于设计师对细节的精雕细琢和对装饰性符号字体的娴熟应用。加上作者无可挑剔的良好排版格式，最终造就了这部简洁但富有视觉冲击力的作品。
Dave Shea，设计师
www.csszengarden.com/005
探索文本样式的各种选项
设计领域的不断发展得益于各种不同的因素，而有时这种前进的动力却来自于过去的事物。而本篇中看似混乱无序的Blood Lust正是借鉴了20世纪早期的未来主义设计理念，并用当代的电脑技术将各种过去的设计元素有效地组合了起来。
在设计过程中，Shea将他收藏的图片依次排布于多个图层中，形成了富有怀旧效果的丝质套印背景，在过去这种风格曾非常流行。而在背景之上则使用了黑、红、白三种色彩的组合，并没有太多的其他颜色。此外，为了增强锐化效果，Shea也避免了一切柔化操作，而是使用GIF抖动图样替代，这也为作品增添了一丝现代气息。
5.5.1 用字体设置页面基调
Blood Lust中的无序、混乱的效果主要来自文字样式的应用。可以看到作品中的段落使用完全不同的样式和布局，形成了混乱和差异化的风格。而这种不同字体的混杂和非和谐的文字排布也是未来主义设计师们常用的技巧（图5-5-1）。
图5-5-1 未来主义设计的一个实例——F. T.Marinetti的“Les mots en liberté futuristes”（1919年）
为了在Blood Lust中创造与众不同的效果，Shea将多种样式的段落放置于不同的位置，形成了虽然混乱却仍能相互有机结合起来的风格。虽然这种效果不便阅读，但看起来却非常有趣——每个段落各不相同的文字间距和字体导致了不同的文字密度，从而让每个段落的基调都各不相同。图5-5-2将页面做了模糊化处理，但即使是在这种情况下，仍可以明显感觉到段落间基调的差异。
图5-5-2 在模糊处理后，文字块让人感觉出不同的基调
而整部作品在很大程度上依赖了基调的变化，以创造出独特的趣味。可以发现，作品中使用的行距、边距和字体调整都能够带来众多视觉上的变化。不过，让我们再回到易读性问题中——图5-5-3中的哪种文字更易辨认呢？这些都是在实现创意时需要考虑的问题。
图5-5-3 不同粗细、间距的文字
Note
在排印学术语中，颜色并不单单指色彩的色相，而是指文字在所处环境下的整体基调。它牵涉到文字所在的页面、文字背景与文字主体之间的对比关系。在这层关系中，间距也起到了相当重要的作用，包括文字的笔画间距、字距、词距和行距等。
在多数情况下，设计的目标是保证文字在页面上拥有整体的一致性。虽然能用CSS控制的文字特性并不算太多，但在处理文字色彩之前，我们依然要首先考虑好可读性、每行字数等更加重要的因素。
5.5.2 格式化选项
Blood Lust使用了CSS中大量的文字格式化功能。若掌握了这些功能——即便只是设置字体和大小这样简单的操作，也可以形成各种不同的组合，进而影响到作品的最终效果。
通过阅读CSS说明文档或者一般的CSS书籍或指导材料，足够让我们在技术层面对CSS有一个简要的理解。可事实上，CSS的很多特性都来自于深层次的设计原则，这些原则却是无法在任何一份技术手册中找到的。
以下的几页中将阐述CSS中通用的文字格式化属性的定义、来源和使用。当然，某些属性（font-family、font-size、font-style和font-weight）在其他章节已有介绍，因而在此略去。
1.文本的样式
本段中涉及的属性均用于单个字符的调整。通常来讲，字体应该带有和属性值相对应的变体形式。系统字体列表中会说明每个字体拥有哪些变体，在决定使用之前，要确定浏览者同样拥有相同的变体。
•font-variant
这个属性的唯一作用是将文字用略小的大写字母表示。原先为大写的字母将仍保持原样，而原先小写的字母将由稍小的大写字母来显示。
这个属性的有两个合法值，分别为normal和small-caps。需要指出的是，多数字体没有small-caps变体，因而浏览器会将大写字母缩小。因为浏览器具有这种特性，font-variant也不强制要求字体必须有预设的变体。
font-variant的使用示例：
quickSummary p {
font-variant: small-caps;
}
效果：
•text-transform
和font-variant类似，text-transform提供了更精确的字符大小写控制。它的可选值有capitalize、uppercase、lowercase和none。
capitalize将每个单词的首字母大写，而uppercase将单词所有字母大写， lowercase则将所有字母小写，none表示默认的正常状态。
text-transform的使用示例：
quickSummary p {
text-transform: uppercase;
}
效果：
•text-decoration
自Web呱呱坠地的那一天开始，下划线就一直被用于表示链接。链接中的下划线也可通过使用text-decoration属性获得更多样式选项。text-decoration的可选值有none、underline、overline、linethrough和blink。其中none表示文字没有修饰，underline会为文字添加下划线，overline则会显示出上划线，line-through会显示为中划线（删除线），而blink将产生时隐时现的效果。
text-decoration同时也是最有争议的格式化属性之一，运用不当将让用户觉得相当不便。这里我们列出各个值的推荐用法：
none——默认值，在没有理由使用其他选项时，none就是最好的选择。
underline——仅在链接中使用underline。我们可能经常下意识地去点击带有下划线的文字，却困惑地发现它们并非链接。从这一点中就可以看到，带有下划线的非链接文字会对浏览者造成误导。虽然下划线在印刷设计中还用于书本的标题，但在网站设计中，下划线等同于链接却已是人们根深蒂固的观念，绝对不要尝试去打破。
overline——在数学中，上划线表示平均值，但其他领域却很少使用。
line-through——line-through仅用于表示已经不再相关、非事实或无效的文字，这些文字可能会很快被其他文字替代。理想的用法是用于那些需要被改写的部分——例如涉及版本跟踪和版本历史的文字中可以经常使用line-through。
blink——除非真的很想模仿录像机中闪烁的“12∶00”，否则最好当作世上没有blink这个选项。在Web应用中，blink>标签早已被废弃，而且CSS中的blink值也并非所有浏览器都能支持。
text-decoration的使用示例：
quickSummary p {
text-decoration: line-through;
}
效果：
Tip
CSS说明档中更加详细地解释了每个字体样式，请参考“15 Fonts”（www.w3.org/TR/R EC-CSS2/fonts.html#font-styling）。
Note
这里所述的所有属性都有一个通用的选项inherit。inherit将让该元素使用其父元素相同的属性值。这个规则对所有的CSS属性都有效，所以我们并没有在介绍属性时重复列出。
2.间距的样式
我们在很多例子中都能看到背景对文字的影响。因此，页面中的间距也能成为一种有效的视觉工具。CSS中自然也提供了各类控制间距的属性。
•line-height
数世纪前，印刷师使用可延展的铅条控制两行文字间的距离，这也是行距（leading1）这个专有名词的起源。CSS提供了简单易用的行距控制属性line-height。该属性可被设置为绝对数值、相对大小、长度或者百分比，当然也可以设定为inherit。
注释：1 lead在英语中也解释为铅。——译者注
line-height不需要单位。1.2和1.2em或者120%是同义的——也就是说未加单位的值表示基于当前文字大小的相对值。
line-height的使用示例：
quickSummary p {
line-height: 0.8;
}
效果：
•letter-spacing
字符间距可使用letter-spacing来控制。我们可以将其设定为normal或一个长度值，该长度值将作为默认值的补充，添加到正常的字符间距上。
由于屏幕的分辨率较低，所以我们不应为大段的文字设置字符间距，否则文字将显得很长。因此最好只在标题和小段文字中使用letter-spacing。
line-height的使用示例：
quickSummary p {
letter-spacing: 0.1em;
}
效果：
Note
著名的印刷大师Fredric Goudy曾说过，“对小写文字设置字符间距如同盗窃2”。在使用字符间距时，我们必须格外谨慎。
注释：2 对小写文字设置字距会使文字变得更加分散，这无疑浪费了有限的空间。——译者注
•word-spacing
和letter-spacing类似，word-spacing用于调整单词的间距。该属性可被设置normal、长度值、百分比值或者inherit。
需要注意的是诸如文字对齐（使用text-align）和white-space等设定均会影响到浏览器对word-spacing的处理。
word-spacing的使用示例：
quickSummary p {
word-spacing: 1em;
}
效果：
•text-align
text-align用于对齐文字。可选值为left、right、center和justify。
传统的对齐技术一般使用添加连字符等方式避免折行所造成的空隙，而浏览器中的调整则相当的不精确，其结果常如图5-5-4那样存在大量空隙。考虑到浏览器的不精确控制，我们更建议使用传统的right-align和left-align方式。而居中对齐则只适合标题、引用等小块文字，不要将其应用到长段文字中。
图5-5-4 缺少连字符的调整将在折行时带来大块的空隙
text-align的使用示例：
quickSummary p {
text-align: right;
}
效果：
5.5.3 万事皆有度
虽然随心所欲地调整并混合不同的文字格式能创造类似Blood Lust那样的艺术效果，可真正的Web设计作品首先是用来让人阅读，而不是作为艺术品膜拜的。了解了这一点之后，相信你一定会恰当地使用CSS中的文字格式化属性，力求创造出清晰、合理的文本布局。
Douglas Bowman，设计师
www.csszengarden.com/017
将方法和创意结合起来创造文字排印的平衡
虽然Golden Mean并非完整的网站项目，但Douglas Bowman在回忆其创作过程时说，他仍然按照了真实世界中的大型网站的制作流程完成了整个作品的创作。
作品本身也印证了一个道理——文字排印和图形设计一样，都是网站设计中重要的组成部分，而站点设计本身又是对创意、技巧和流程的有机结合。
5.6.1 选择字体
Bowman首先对作品的内容和含义进行了仔细的考虑。为了验证创意的可行性，他特意勾出了一幅页面的草图，在确信作品可行后才深入到页面文字的设计中。
与图像和色彩的运用相比，虽然字体的选择显得略微次要一些，但有经验的设计师却认为设计的成功与否取决于诸多的因素，而其中一个很重要的因素就是字体。字体往往能够给浏览者一些暗示，情绪就是其能够暗示的一种，常见的情绪有：
□ 幽默；
□ 淡泊；
□ 狂野；
□ 怪诞；
□ 忧郁。
如果能够在作品中加入一种情绪，那么也可以用一种相应的字体将其表达出来。考虑到这个重要因素，设计师完全应该在选择字体时更加仔细，力求表现出更多的灵感和创意。
1.在Illustrator中试验
为了确定合适的字体，Bowman打开了Adobe Illustrator，寻找能够与作品优雅格调相配的字体。
图5-6-1是Bowman当初试验时的一张截图。要在其中找寻找到能同时表达出机敏、趣味的独特设计也花费了不少的时间。关于这张图，值得我们借鉴的是，虽然Bowman仅从中挑选出了将用于“CSS Zen Garden”和“The Beauty of CSS Design”两段文字的字体，但像这样对字体列表的预览却帮助他把握了整个页面的风格。
图5-6-1 在Golden Mean的创作过程中，设计师尝试了多种字体
Note
Illustrator是一款矢量作图软件。许多设计师都习惯在Illustrator中作出草图，再由Photoshop像素化，并最终整合到页面中（Illustrator和Photoshop都包含于Adobe的Creative Suite软件包中）。而Macromedia的对应产品是Freehand1。关于这些软件的信息，请参见www.adobe.co m/pro duc ts/creativesuite/main.html和http://www.ad-obe.com/products/studio/。
注释：1 Macromedia公司与Adobe公司已合并，Freehand现在已是Adobe公司旗下的产品。——译者注
Bowman最终选择了Morpheus字体，该字体可在dafont.com网站中下载（图5-6-2）。至于为什么要这样选择，他的解释如下：
图5-6-2 Morpheus字体
□ 特殊的M和N字型；
□ 哥特式的拱形（A和U中特别明显）；
□ K和R的自然延展；
□ S和小写d的特殊字型；
□ 小写i和D、O、Q中起装饰作用的菱形。
2.制造视觉张力
之后Bowman又试图寻找一种能和Morpheus形成强烈对比的字体，以期形成视觉上的张力感。最后，他选择了Helvetica字体与Morpheus字体组合。Helvetica是一种现代派的sans-serif字体，它和Morpheus的哥特式风格形成了巨大的反差（图5-6-3）。其他带有强烈对比的字体组合还包含链接列表中sans-serif字族的Verdana字体与小写的serif字族的Georgia（图5-6-4）。最后，为了确保链接为小写，Bowman将text-transform属性设置为lowercase：
图5-6-3 标题中Morpheus和Helvetica字体的组合
图5-6-4 链接列表中同时使用了Verdana和Georgia字体。注意到所有的Geogia字体都设为小写，而Verdana则使用了正常字体
linkList #lselect a.c:link, #linkList #lselect a.c:visited {
display:inline;
font-family:Georgia,Serif;
font-weight:normal;
color:#616623;
background-color:transparent;
text-transform:lowercase;
}
需要注意的是，text-transform的可选值还包含将首字母大写的capitalize和将所有字母大写的uppercase。
链接列表中的Georgia字体常用于正文（图5-6-5），它的斜体则用于导言。这两种变体的运用也为作品添加了新的变化。
3.控制抗锯齿
若仔细观察图片中的文字本身，就会发现其边缘相当的清晰。但为什么放在网页上之后却有时会变得模糊起来呢？这里我们可以解释一下导致模糊的几个主要原因。第一个种可能是图片的初始设置存在问题，或者缺少合理的优化。而另一个原因则是因为应用了抗锯齿（anti-aliasing）功能。
抗锯齿是图像处理软件的一种功能，它能在锯齿边缘加入半调色彩以达到柔化的效果。排版软件均提供了包括抗锯齿在内的各种强大的优化功能，但设计师若想得到清晰的字体边缘，则必须手动避免抗锯齿效果造成的字体模糊。
这个问题在小号文字中显得更为重要。字体中的笔画和曲线（注意到Morpheus之类的字体中细小的笔画特别多）不能被缩减到一个像素以下，因为抗锯齿功能对小字体会加入更多的半调色，进而造成更严重的模糊。而主流图像处理软件中的紧排（kern）功能则可以微弱地调整字体空隙，达到更好的柔化效果。
5.6.2 深入理解文字排印
如果上面的介绍让您渴望了解更多的文字排印相关知识，那也没有任何问题！各种图书和网络上都有足够的信息让你获取。
1.推荐书籍
下次出行时一定要记得在喜爱的书店前留步，只要仔细浏览其中有关设计的书目，就一定会有适合的图书。这些图书可能是经典名著，也有可能专攻字体设计，还可能展示了某位设计师的相关作品。只要像阅读HTML和CSS那样翻阅一遍，即可找到很多全新的方法和创意。但这里还必须提醒的是，一定记得要去看Robin Williams的名著。
□ The Mac Is Not a Typewriter, 2nd Edition（2003年由PeachpitPress出版社出版）和The PC Is Not a Typewriter （1995年由Peachpit Press出版社出版）。这两本中的一本针对苹果用户，而另一本则适合Windows用户，阅读二者都将在网页和印刷设计中受益匪浅。
图5-6-5 注意在正文中使用的常规Georgia字体和在导言中使用的斜体Georgia字体，同样需要注意的还有标题中字体的运用
Tip
虽然你可以尝试使用不同的字体，但即便是有经验的设计师也很难在一个页面中运用不同的字体族。因而最好避免使用不同字体族。
Tip
关于这个问题有一篇更深入的讨论，请参考Type: the Extra Mile（www.mez zoblue.com/archives/2004/01/18/typ e_the_ext）。
□ The Non-Designer’s Type Book（1998年由Peachpit Press出版社出版）。无论你现在是一位职业设计师还是一位设计爱好者，这部书都能向你揭示字体设计中的惊人之处。包括设计文档时的技巧，以及突破陈规的各类有效方法等。
如果你是一位高级设计师，则或许会需要更多的字体相关书籍。这里我们列举了一些有价值的参考：
□ Rob Carter、Ben Day和Philip Meggs所著的Typographic Design:Form and Communication, 3rd Edition（2002年由John Wiley &Sons出版社出版）。本书深入研究了字体的历史由来，也提供了一些通用字型、字体的参考。此书并非为初学者准备，但若想了解排印学的基础知识，那么阅读本书定会大有裨益。
□ Robert Bringhurst所著的The Elements of Typographic Style, 2ndEdition（2002年由Hartley & Marks Publishers出版社出版）是一本排印学的高级参考。本书堪称排印学的百科全书，因而适合高级排印人员阅读。其中排印理论的实际应用是不可错过的篇章。
□ Allan Haley所著的Alphabet: The History, Evolution, and Design ofthe Letters We Use Today（1995年由Pub Overstock Unlimited出版社出版）。此书出自一位排印领域的高产作家。它对字体的历史与字体在当今的使用有着相当独到的见解。而作者Haley的其他书籍也均是通俗易懂的佳作。
□ 还可以阅读一些当代的作品，甚至是那些还存有有争议的著作，例如Lewis Blackwell和David Carson所著的The End of Print: The Grafik Design of David Carson, Revised Edition，2000年由Chronicle Books出版社出版），就囊括了排印领域的众多有争议性的论题，或许能带来一些启发。
2.在线的字体资源
如果更喜爱在网络上搜寻信息，那必须准备好足够的时间，因为网络上已有太多的相关资源。从网络字体库到对字体历史的介绍和指导，只要在Google中搜索“typography”、“type foundries”等关键词，就会得到一整天都无法看完的信息。这里我们列出了一些最有用的资源。
□ Type Designers （http://www.myfonts.com/person/index.html）1。Luc Devroye创建的这张冗长的列表使用了A～Z的字母排序，囊括了几乎所有的当代字体设计师以及他们的著作、网站和联系方式。
注释：1 原链接http://cgm.cs.mcgill.ca/～luc/longdesigners.html已失效。——译者注
□ Identifont （www.identifont.com）。一个十分有趣的站点，该网站通过询问数个问题帮我们找到所需要的字体，同时也提供了很多其他的字体资源。
□ MyFonts （www.myfonts.com）。这或许是互联网上最难看的字体站点了，但是它的内容却相当不错。所提供的搜索功能能灵活地模糊匹配的查询条件，而WhatTheFont工具则能通过上传的截图辨识出其中使用的字体。
□ Adobe Type Library（http://store.adobe.com/type）。Adobe公司维护的商用字体库。
□ Website Tips（www.websitetips.com/fonts）。这个站点几乎囊括了网络上所有可以找到的字体。它不但提供了共享和免费的字体和外文字体，同时也列出了字体相关的组织和新闻组，以及一系列的字体相关软件。
虽然字体的学习将是一个漫长的过程，但却不应因此忽视它。因为只有良好地掌握了字体知识，才能创作出精彩的设计作品。
5.6.3 平衡才是关键
亚里士多德的“凡事中庸而行”是智慧的生存之道。虽然在设计中的一个思路是追求极限，但就实用的作品而言，平衡才是成功的关键。
而Golden Mean中选用的那些富有对比的字体，既不脱离文字的实际作用，同时也给浏览者留下了深刻的视觉印象，堪称把握字体平衡的绝佳范例。
