11. 网页排版

序言

什么是排版？简单地说，排版指文本的样式、设计和摆置，这是一个从传统的印刷设计中借用来的概念。知道你能通过排版做什么与知道你不能通过排版做什么一样重要。在万维网上，排版通常很少引起人们的注意，同时也存在一些技术限制，可能使得网页排版比印刷排版更为困难。虽然如此，有了一些可用的工具，你还是能排出各种样式美观、独具风格的网页版面的。

在本篇文章中，我将讲述为什么相对于印刷排版，网页排版是受到限制的，并告诉大家一些网页排版的诀窍，同时以一个示范网页演示如何运用其中一些诀窍。如果你还不理解 CSS 和 HTML 代码，也不必担心，现在你仅需要考虑设计。在你阅读本篇文章时，最好在身旁放置一支笔（钢笔或铅笔都可以）和一张纸，自己动手勾画文本布局。本篇文章的内容目录如下：

 

• 网页排版受到的限制
  • 可供选择的字体较少
  • 连字符连接
  • 字距调整
  • 缺乏控制
• 如何进行网页排版?
• 网页排版的一些诀窍
  • 选择字体范围
  • 行长
  • 行高
  • 首字母下沉
  • 小型大写字母
  • 悬挂标点
  • 排版正确的标点和其它HTML实体
  • 重要引述
• 总结
• 练习题

网页排版受到的限制

印刷设计师在排版时，可供其使用的排版选项是非常多的，包括有很多字体可供选择，可供选择的定位文本的方式也很多。相比之下，网页排版就要受到很多限制了，这是因为我们在使用字体和文本定位等进行网页的排版设计时，必须考虑到排版设计要能在访问网站的用户的计算机上正常显示，这绝不像仅为你自己设计那样简单。

网页排版受到的限制包括：

• 可供选择的字体较少
• 没有连字符连接，这使得让在狭窄的栏里的文字两端对齐时会显得很难看
• 很难控制字距调整
• 缺乏对排好的版面将如何显示的控制，设计师必须考虑在很多不同的屏幕尺寸、分辨率和环境下排好版的页面将如何显示

以下我们就来详细看看这些限制因素。

可供选择的字体较少

在格式化文本时，你通常遇到的第一个问题就是可供选择的字体较少。虽然你可以在 CSS 中指定你喜欢的任何字体，但只有在网站访问者的计算机中也安装有该种字体的情况下，他们才能看到文本是以该种字体显示的。否则的话，他们使用的浏览器会用你在 CSS 中指定的替代字体来显示，或是用浏览器的默认字体（通常是 Times New Roman 字体）来显示。因此，也许你喜欢网页的所有正文内容都以你指定的字体如 Trump Medieval 字体或 Avant Garde 字体来显示，但除非你的目标受众和你的偏好很一致，他们是不太可能从这种字体设置中受益的。正是因为这个原因，多数 Web 设计师都仅使用一些最为常见的字体，通常包括：

• Andale Mono 字体
• Times New Roman 字体
• Georgia 字体
• Verdana 字体
• Arial/Arial Black 字体
• Courier/Courier New 字体
• Trebuchet MS 字体
• Comic Sans 字体（很多人认为这种字体难看，因此除偶尔可在面向儿童的网站中使用这种字体外，要避免使用这种字体）
• Impact 字体

这些字体的外观如图1所示：

图1：能在所有系统上正常显示的一些最为常见的字体

为文本选定以上这些最为常见的字体中的任何一种，意味着你选定的字体很可能是绝大多数用户也都已安装的字体。微软在其 Windows Vista 和 Windows XP 系统中引入了 6种新字体，名称都是以字母 C 开头的，即 Cambria 字体、Calibri 字体、Candara 字体、Consolas 字体、Constantia 字体，和 Corbel 字体。但我建议你们最好还是不要使用这 6种字体，原因是在 Mac 平台或 Linux 平台上它们似乎还不可用。

因此与有上千种字体可用的印刷设计师相比，Web 设计师可放心选择的字体只有十几种。不过这是一个重大的限制因素吗？应该不是。排版远不止是选择有吸引力的字体那么简单，它还涉及设置行长、字母间距、空白等诸多工作。不要忘了，那些生活在电子字体出现以前时代的排印工人也面临一样的限制的。

连字符连接

当你想对齐在其容器里的文本时，有四种对齐方式可供选择：左对齐、右对齐、居中对齐、两端对齐。两端对齐的文本，段落的左右两端都与容器的垂直边对齐，看起来要比段落一端参差不齐的文本好看些，你在很多杂志和书籍上都可以看到这种两端对齐的排版方式。但是在网页上，由于缺乏自动连字符连接，采用两端对齐就可能出现问题。为使文本显示为两端对齐，浏览器所能做的只是调整单词之间的字距，这可能导致文本中出现大量的空白－当文本块内的行距过短，没有足够的空间来很精细地调整单词之间的字距时，通常就会出现这种情况，如图 2所示。

图2：大量空白使两端对齐的文本块显得很不好看

从这个截屏图中你们可以看到，缺乏连字符将单词自然地分割开来，造成一些单词之间出现过大的空白。为避免出现这种情况，网页上多数地方的文本都应使用左对齐的方式。

字距调整

字距调整指在使用比例字体（如 Times New Roman 字体，字符之间的间距各不相同）时，调整字母之间的间距，而使用等宽字体（如 Courier 字体，字符之间的间距都是相同的）时，不需要调整字母之间的间距。在印刷排版中，字距调整用于紧缩一些字母之间的间距，如 W 之后是 A 时，以使它们排列自然，这样可以使文字排版显得更专业。多数专业字体都带有内建的字距调整指示，向排版技师提供字距信息。请看图3，它显示了字距调整的一个示例。

图3：字距调整无疑改善了文字的外观

在以上这个截屏图中，第一个单词没有进行字距调整，而在第二个单词中，W 和 A 之间的间距缩小了，S 和 P 之间的间距又略微增大了一点。

而在网页上，要对特定单词进行如此精确的字距调整尚无法做到。要调整字距，我们只能使用 tracking（全篇字距调整），这个词在印刷业指同时调整整篇文稿中所有字符之间的间距，也就是说，你虽然可以缩小 W 和 A 之间的间距，但这种缩小对其它所有字母之间的间距同样有影响。在网页上，tracking 更为常用的名称是 letter spacing（字母间距），可用 CSS 加以控制，如图4所示。

图4：在网页上对特定单词进行精确的字距调整尚无法做到，目前能做到的只是全篇字距调整

在以上这个截屏图中，每个字符之间的间距都相同地增大了一点。虽然这样使 A 和 S 不至显得靠得过近，但 W 和 A 之间的间距却又显得过大了。正是由于这个原因，CSS 的字母间距调整属性是很难有效使用的属性，最好谨慎地使用。

缺乏控制

以上我们一直在说印刷业如何如何，这里你需要牢记非常重要的一点，那就是网页不同于印刷品。这也就是说，印刷设计师不用担心读者会自己调整文字的大小，或未安装某些字体，或未开启使字体的边缘平滑显示的功能，而我们这些网页设计师就会担心这些问题。很多网页设计师常试图迫使访问网页的人接受某一特别的设计，如固定文字大小，或将文本放在固定宽度和高度的容器内，甚或至用图像替代整块文本等。

其实这种缺乏对排好的版面将如何显示的控制，不必成为一个问题，只要你认识到人们是希望在不同的设备上以不同的方式阅读你的网页上的内容。你不应为他们访问网页设置任何障碍，而应使他们能尽可能容易地阅读网页上的内容。他们也许想在坐通勤车回家的途中在移动设备上阅读网页的内容；他们也许会选择将网页所有内容都打印出来，在纸上而不是在电脑屏幕上阅读这些内容；他们也有可能是视力受损的人，需要将字体扩大一些。你在格式化网页上的文本时，实质上是在向所有这些不同的浏览设备提供你希望这些文本如何被显示的指导。当然这些浏览设备不一定就按你希望的样子显示网页，但这也不是什么问题。这里真正重要的是你不要试图把你的设计强加给所有受众。

如何进行网页排版？

应使用 CSS 控制网页的排版。CSS 的网页排版功能十分强大，使用 CSS，你不仅可以控制文字的大小、颜色和字体，还可以控制行高、字母间距、大小写（全部大写、首字大写、小型大写或全部都小写等），甚至还可以控制文本的第一个字或第一行的样式。

通过格式化文本块中包含的文字，你还能控制文本的对齐方式和行长。不仅如此，你只需要在某一位置创建你的样式规则（即样式表），就可以让这些样式规则应用于整个网站的所有文本（当然你也可以为特定的段落或网页的某些区域创建特别的样式表）。此外，任何时候你发现需要让网站上的文字增大，或是需要改变正文的字体，你只需更改样式表中的“值”即可。

网页排版的一些诀窍

以下是网页排版的一些诀窍：

选择字体范围

在规定你希望显示的字体时，指定一些备用的字体，这是一个良好的习惯。因此，与只指定使用“Georgia 字体”相比，更好的做法是指定“Georgia, Cambria，"Times New Roman", Times, serif”。这样浏览器在显示字体时，会首先试着使用第一选项 Georgia 字体，如果访问者的计算机上未安装 Georgia 字体，则试着使用 Cambria 字体，如果也未安装，则试着使用 Times New Roman 字体，然后是 Times 字体。如果以上字体都未安装，最后就会使用被操作系统定义为“serif”（衬线字体）的任何一种字体。

行长

为增强易读性，文本块内每行文字的平均长度应为每行 40－60 个字符，当然具体还要根据不同的受众对象而有变化（儿童喜欢每行短一些，而成人喜欢每行长一些）。适宜的每行长度如图5所示：

图5：每行60个字符—适宜的每行长度

在以上这个截屏图中，每行有约 60个字符。如果每行内的字符数超过这一数字，阅读者就可能不得不开始移动他们的眼睛或甚至是头部来看全每行文字，这样可能会让阅读者的眼睛更疲劳，同时也降低了文本的易读性。

行高

行高指文本行的基线间的距离。为使文本更易读，你可以将行高设置为比浏览器的默认行高更高一点（这样还可以使手写或草写字体的字符有更大的间隔）。请看图6中两段不同行高的文字之间的差别：

图6：不同的行高可以让文本的外观呈现出很大的差别

在以上这个截屏图中，第一段文字的行高为默认行高，给人的感觉是有点密密麻麻的。而第二段文字的行高则增加了一点，这样文字排列得要舒展一些，更为易读。不过你也要注意，行高设置得过大，同样也会让文本难于阅读的。

首字母下沉

在 CSS 中，通过为 first-letter 伪元素设定 p:first-letter { } 这样的样式规则，你可以让一行文字的首字母的样式与其它字母的样式不同，这种样式设置通常被称为首字母下沉，即让首字母下沉 3－4 行，如图7所示。

图7：首字母下沉示例

小型大写字母

有时候我们需要使用字体的小型大写字母变体，即单词的每个字母都大写，但大小和单词的小写体差不多。当你想将一些词大写但又不想让其过于醒目时，就可以使用小型大写字母（如用于缩写词等）。即使操作系统内没有安装某一特定字体的小型大写字母变体，这也不是什么问题，因为浏览器会生成该字体的小型大写字母变体（即把该字体的正常大写变体缩小约 30%）。图8为小型大写字母的实例。

图8：小型大写字母的实例

悬挂标点

如果网页中文本的句子以引号开头，你可以使用悬挂标点。具体做法是使用 text-indent 这个 CSS 属性，并为其加上负数值，ems（-10em），points 磅数（-10pt），pixels 像素（-10px），percent 百分比（-10%）都可。这样引号的边缘就悬挂在文本左边距以外，使文字在视觉上呈现左对齐状态，如图9所示：。

图9：悬挂标点

排版正确的标点和其它 HTML 实体

你可以通过使用多种可用的用于排版的 HTML 实体，如“智能”或“卷曲”的引号，和 en–、em—破折号等，让你的文本看起来更专业、更雅致。许多博客软件和字处理软件在你键入文本时都会自动为你做这种调整，比如将你一直习惯使用的直引号改为排版正确的卷曲引号，将你使用的不规范的破折号改为en–破折号和em—破折号等。图10为排版正确的标点符号的示例。

图10：排版正确的标点符号

在你的文本中使用了智能标点后，文本会显得更专业、更雅致，换句话说，更像杂志和书籍的版面。不过有一点你要注意，对那些使用较老式的显示器或未开启使字体的边缘平滑显示的功能的用户来说，这种智能标点可能会显得像素较粗，因此要谨慎使用。

为插入一些键盘上没有的特殊字符，你可以将一些特别的 HTML 实体插入文本中，以生成这些特殊字符。图11中显示了多种此类 HTML 实体：

图11：HTML 实体

你可以自己键入这些 HTML 实体，不过有很多内容管理软件可以为你转换或插入这些 HTML 实体。

重要引述

“重要引述”（pull-quote）指你的文本中的一小段文字，在页面其它地方以更大的字号（有时还用不同的字体）显示，以引起阅读者的注意。在你读过的几乎每本杂志上你可能都已看到过这种“重要引述”，它是有效地分隔你的文本和让重要的引语和短句突出显示的有效方式。在网页上摆置“重要引述”也很容易，只需使用一些简单的标记和样式即可。你可以为“重要引述”设置更大的字号，也许还可以使用不同的字体，然后将其定位，把文本包裹进去，这样就行了。此外，还有更先进的方法可用，即用 JavaScript 挑选出选定的文本，然后自动创建出“重要引述”，这样你就不必在你的标记中两次书写同一个文本。

总结

本篇讲述的主题是网页排版。你们在读完这篇文章后，就能知道网页上的文本不是单调到只使用 Verdana, small, #333333 这样一种样式，是有很多排版技巧和诀窍可用的，它们可帮助你排出雅致美观、独具风格的文本。对绝大多数网站来说，人们去访问它们就是为了去阅读网站上的内容，因此作为一个网页设计师，你应该通过专业的网页排版，让人们能轻松愉悦地阅读网页上的内容。

练习题

• Kerning（字距调整）和 Tracking（全篇字距调整）有什么差别？哪一种方式是网页设计师可用的？
• 你如何避免网页文本中出现大量空白？
• 说出通过 CSS 可设置的 4种不同的大写样式。
• 正文内容适宜的行长是多少？哪些因素对行长有影响？
• 衬线字体和无衬线字体的差别何在？分别说出一种衬线字体和无衬线字体的具体字体名称。
• 悬挂标点和普通标点的差别何在？
• 如果你想向网页文本中插入版权符号，你可以使用一个 HTML 实体。请上网看看你是否能找到其它所有的 HTML 实体。实际上有约 250种 HTML 实体！