标准化网页设计中文本排版的原则与细节-站长中国-中国站长门户从这里开始全面了解中国站长

标准化网页设计中文本排版的原则与细节

风格之舞　 2007年09月18日17:10:22　火德评论(0条) 字体:[大中小]
相关热点：CSS Web标准 XHTML 原则排版教程细节火德

网站的核心是内容，用户访问网站最重要的目的就是要看网站的正文，所以，网页的文本排版非常重要。

网页的文本排版并不是仅仅在CSS里设置个字体大小那么简单的，想要有好的排版，对细节要下一番功夫才行。

一、排版原则

按照我的理解，在遵循Web标准的情况下，网页设计中的文字排版应该遵守以下原则：语义明确、代码简练，善用预定义标签

排版时，语义明确很重要。在Web标准化的思想上，我们要尽量做到结构与样式的分离，我们的代码要尽量简洁，避免无效的、无意义的代码。过多的无意义代码不仅不利于网站的日常维护，增加加载与解释时间，还会对将来网站的改版、重构造成障碍。如果不能做到按语义标识文本的各类元素，并且将样式分离并重新定义，将来调整样式或者重构站点的时候你会哭死的（亲身体会）。

如果能够用好XHTML的预定义标签，并为预定义标签定义合适的样式，会极大的提高工作效率。比如为<blockquote>标签定义样式，然后在需要表示引用的地方使用<blockquote>标签。在很多老式的使用表格布局的站点上，引用的内容都是用表格做出来的，这种方法生成了大量的table、tr、td标签和写在标签内的style，体积庞大就不说了，如果将来需要修改整站的引用样式时，只能一篇文章一篇文章的慢慢改代码。而使用并重定义<blockquote>标签后，我们只需要在CSS文件中改一下对blockquote的定义就可以把整个站点的引用样式改过来了。（这种思想也可以利用在网站的其它部分设计中）

类似的可以预定义的标签还有很多，比如：h1, h2, h3, em, strong, a, ul, li, dl, dt, dd 等。

二、重要的细节

2.1 字体大小与行距

在早期的网页设计中，设计师为了追求中文字体的最佳视觉效果，经常使用12px像素的字号。其实在现在看来，网站内容页面用这么小的文字是不可取的，小字体的可读性很差，没有多少人愿意非常费力的盯着屏幕去辨识那些小字。应该说，将文字的字号设置成14px或者更大的16px会更加合理，浏览者阅读起来也更加轻松。当然，如果条件允许，可以在文章阅读页面增加选择字体大、中、小的连接。

文本之间的行距是非常重要的，因为挤在一起的文章会让读者看起来非常累，时不时的还会看错行。在面对密密麻麻挤在一起的长篇文字时，很少有人有耐心会看下去（至少我是如此）。一般情况下，文本的行距为1.5em与1.7em之间比较好，最好不要高于2em，否则过犹不及。

快速参考：
CSS中使用font-size调整字体大小，例如：font-size:14px;
CSS中使用line-height调整行距，例如：line-height:1.6em;

2.2 段落间距

在段落之间，要保持足够的间距才能让读者更容易识别，页面也更整洁。面对没有段落间距的页面，读者很可能会把几个连在一起的小段路看成一个大段落，如果每个段落内容太多，很少有读者有耐心读完，因为互联网上绝大多数的读者浏览网站的方法并不是精读，而是“扫描”。

我们通过修改p标签的margin属性或者padding属性来修改段落间距。相比较而言，段落间距占据一行文字的距离还是比较合理的，所以我们通常设置段落间距为1em。我习惯使用“padding:0.5em 0 0.5em 0;”来设置段落间距，padding后设置的距离按照顺序分别是段落的上方、右方、下方、左方间距。之所以在上方和下方各用一个0.5em而不是在下方用1em，是因为分别为上方和下方设置段落间距会让段落在右边框或背景的时候看起来更加均匀。

快速参考：p { padding:0.5em 0 0.5em 0; }

2.3 段落首行缩进

在HTML中，半角空格是无法连续识别的，所以很多从网上找的文章都是没有段落缩进的，这样从板式上看起来就不是太符合我们中文文章在生活中的习惯，我们习惯开头空两个汉字的位置，而我们又懒得每个段落都去添上全角空格，那么我们可以使用段落首行缩进解决问题。使用text-indent即可实现段落的首行缩进，如果我们想要首行空两个汉字的位置，那么我们可以设置“text-indent:2em;”，这样缩进问题就解决了。

快速参考：p { text-indent:2em; }

2.4 常用标签定义

这个问题前面已经提到了，具体情况因人而异，这里举个例子说明一下。假如我需要重新定义em标签，通常em标签都是显示为斜体的，我为了让他更突出，给他加一个颜色定义“color:green;”，这样我们在使用这些预定义标签的时候会更加得心应手，也更加符合自己的需要。

快速参考：em { color:green; }

在网页设计中文本排版的技巧和细节还有很多，我所列的都是我认为比较重要的部分，如果你发现其他值得注意的细节问题，欢迎到我的博客 www.style5.cn 与我交流，或者通过Google Talk、MSN与我联系：aicoylei@gmail.com

在Web标准化的路上我们还有很长的路要走，最后向大家介绍一个学习技巧：用Firefox的插件Firebug查看那些优秀的站点如何使用XHTML与CSS，多观察、多总结你会有很大收获的。

作者：火德