网站设计之字体在页面排版上的完全攻略

网站设计之字体在页面排版上的完全攻略,

我们每天设计都在与字体打交道。但是我们一直没有认真在意他们的存在。我们没有很好地使用过他们，甚至滥用他们。这一切是因为我们不了解他们。字体作为排版的重要元素之一;在设计里也是最深奥的一门学问之一。本文中，就与大家来一起探讨一下这门深奥的学问。

字体的类型

英文字体(Typeface)，分为几种大类，这是在使用英文字体的时候必须知道的基本知识：

一、衬线体(Serif)

衬线(serif)就是笔画边缘的装饰部分。下图中红色标注的地方就是衬线。

衬线设计的初衷是为了更清楚地标明笔触的末端，提高辨识率，提高阅读速度。另外，使用衬线字体会让人感觉更加的正统。所以我们常见的英文书籍，特别是论文、小说，很多都是使用衬线体来完成正文的。

网页设计中常用的衬线体有Times New Roman和Georgia。下图左边是12px的Times New Roman字体，右边是12px的Georgia。

在中文里，我们使用的宋体就是对应的衬线字体。

二、非衬线体/无衬线体(Sans-serif)

字体如果不带衬线的话，那么就称为非衬线体或者无衬线体。下图就是非衬线体。

网页设计中常用的非衬线体相对就比较多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下图从左到右依次是Arial、Verdana、Tahoma:


值得注意的是，虽然在书籍中，衬线字体被广泛地应用，但是在互联网上，衬线字体很少被使用。由于电脑屏幕分辨率与书籍不具可比性，所以正文10～12px的 衬线字体在电脑屏幕上是很难辨认的。下图是没有Cleartype时，10px的Verdana和10px的Times New Roman的对比。大家可以发现，左侧的Verdana可以被很好的辨识。右侧的Times New Roman辨认相当困难。

三、等宽字体(Monospace)

等宽字体事实上只针对西文字体。因为英文字母的宽度各不相同。例如i就要比m窄很多。编程时显示代码，如果字母不等宽那么排版将很难看。我们在DOS命令行中，可以看到使用的是等宽字体。

编程要求的等宽字体有如下要求：

1、所有字符等宽;

2、简洁、清晰、规范的字符形体;

3、支持ASCII码为128的扩展字符集;

4、空白字符(ASCII: 0×20)与其他字符等宽;

5、“1”、“l”和“i”等三个字符易于区分;

6、“0”、“o”和“O”等三个字符易于区分;

7、双引号、单引号的前后部分易于区分，最好是镜像对称的;

8、清晰的标点符号外形，尤其是大括符、圆括符和方括符。

常见的等宽字体有Courier，Courier New