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

　　在当今数字化时代，网站设计的重要性日益凸显，而字体在页面排版中扮演着至关重要的角色。本文将为您呈现一份关于网站设计之字体在页面排版上的完全攻略。我们将深入探讨字体如何影响用户体验，怎样选择合适的字体来传达网站的风格和信息，以及如何通过巧妙的排版让文字更具吸引力和可读性。无论是设计师还是网站所有者，都能从本文中获得宝贵的见解和实用的技巧，帮助您打造出视觉效果出众、用户友好的网站页面。准备好开启这场字体与排版的精彩之旅了吗？

　　我们每天都在处理字体。但是我们没有认真对待他们。我们没有很好地利用它们，甚至滥用它们。这一切都是因为我们不了解他们。字体是排版的重要元素之一。也是设计中最深奥的课题之一。在这个张文，我将与你讨论这一深刻的知识。

　　字体类型

　　英文字体分为几类，这是使用英文字体时必须知道的基础知识：

　　一. Serif

　　衬线是笔画边缘的装饰部分。下图中用红色标出的地方就是衬线。

　　衬线设计的初衷是为了清晰地标记笔画的结束，提高识别率和阅读速度。另外，使用衬线字体会让人觉得比较正统。所以我们很多常见的英文书，尤其是论文和小说，都是用serif来完成正文的。

　　网页设计中常用的衬线体有《泰晤士报》《新罗马》和《佐治亚》。下图左侧为12px倍新罗马字体，右侧为12px乔治亚字体。

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

　　第二，非衬线/无衬线

　　如果字体是无衬线的，就叫无衬线或无衬线。下图为非衬线体。

　　网页设计中常用的非衬线体比较多。有Arial，Verdana，Tahoma，Helivetica，Calibri等等。以下图片从左到右分别是Arial，Verdana，Tahoma:

　　值得注意的是，虽然书籍中广泛使用衬线字体，但网上很少使用衬线字体。由于电脑屏幕的分辨率无法与书籍相比，所以很难识别出电脑屏幕上文字10 ~ 12px的衬线字体。下图是10px的Verdana和没有Cleartype的10px的Times New Roman的对比。如你所见，左边的Verdana可以很好的识别出来。右边的时代新罗马是相当难辨认的。

　　三、等间距(Monospace)

　　等宽字体其实只针对西文字体。因为英文字母宽度不一样。比如我，比m窄很多，编程的时候显示代码。如果字母宽度不等，排版会很难看。在DOS命令行上，我们可以看到使用了等宽的字体。

　　编程所需的等宽字体有以下要求：

　　1.所有字符宽度相等；

　　2.简单、清晰、规范的文字形式；

　　3.支持ASCII码在128以上的扩展字符集；

　　4.空白字符(ASCII: 020)与其他字符宽度相同；

　　5.“1”、“L”、“I”容易区分；

　　6.“0”、“O”和“O”容易区分；

　　7.双引号和单引号的前后部分容易区分，最好镜像对称；

　　8.标点符号清晰，特别是大、圆、方括号。

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

　　四、书法(书法)

　　顾名思义，手写是一种手写风格的字体。有时我们也称之为书法字体。中国书法字体大多比较生硬。个人推荐使用日本书法字体。日本书法字体更柔和，更人性化。但是使用日本书法字体的缺点是大部分都是繁体，少了很多汉字。

　　动词（verb的缩写）符号体(符号)

　　Windows中最著名的符号体是Webdings(我记得我在Windows 95的时候用的特别多……)。这里有一些韦丁斯字体：字体的风格

　　常见的字体样式分为普通、粗体和斜体。

　　简单来说，加粗就是字体会更深更粗。斜体是将字轴稍微倾斜。都是用来强调空间中某一段的。

　　说到粗体，我们很容易想到CSS中的字体粗细属性。我们知道字体粗细属性值除了正常和加粗外，还包括加粗、变轻、100~900等属性。那么100 ~ 900的值是多少呢？其实100到900之间没有单位。优秀的字体会为不同的权重提供不同的设计。如果字体是预先用不同的粗细级别构建的，那么这些值将对应于每个级别。例如，苏黎世字体包括六种字体：苏黎世灯、苏黎世常规、苏黎世中等、苏黎世粗体、苏黎世黑色和苏黎世超黑色。这样，苏黎世光对应100、200、300，苏黎世常规对应400“正常”，苏黎世中对应500，“粗体”苏黎世粗体对应600、700，苏黎世黑色对应800，最后苏黎世超黑对应900。

　　网络上一般不用中文斜体。因为中文笔画多，斜体时会很难识别。

　　单元

　　br>

　　我们的Web设计中会用到一些单位：

　　1、点(pt、point)

　　72 points = 1 inch，1英寸是72点。另外，1皮卡(pica)=12 points

　　2、像素(pixel、px)

　　像素就是电脑屏幕上的一个最小的图像单元，通俗地说就是屏幕上最小的一个点。

　　3、DPI、PPI

　　DPI 全称是Dots Per Inch，点每英寸，PPI全称是Pixel Per Inch。他们是解析度(Resolution)的单位。也就是说，1inch的长度上能安排多少个点(像素)。举个例子，一般的，我们的显示器大概是 72ppi，也就是1英寸的长度上，有72个点(像素)。dpi/ppi越高，解析度就越高，也就是说，颗粒越小，图像越细腻。一般来说，照片的解析度在 240dpi～300dpi之间，所以为什么照片看起来，要比屏幕上看起来要细致得多。杂志印刷用133或150dpi，高品质书籍采用350-400dpi，因为大多数印刷精美的书籍印刷时用175到200dpi。所以为什么同样物理大小的文字，在书上看，要比在屏幕上看要清晰得多。也就是我们前面提到的，英文书籍印刷，为什么可以大胆得使用Sans-serif字体。

　　dpi和ppi之间实质上没有差别。实在要找出差别，那么唯一的差别也许在于dpi常常用于描述扫描仪和打印机，而ppi常常描述屏幕的分辨率。

　　4、ex、x-height

　　常在CSS中使用。1ex = 小写字母x的高度。

　　5、em

　　常在CSS中使用。当然，em可不是表示小写字母m的高度(事实上，小写字母m一般和小写字母x的高度是一样的)。1em = 字体的大小的100%。是一个倍数单位。

　　间距

　　1、行距(Line-height、Leading)

　　说到行距(行间距、Line-height、Leading)，我们必须先要学习一个术语叫做基线(baseline)。还记得我们刚学英语的时候写字母用 的那个线格簿子吗?那根最粗的横线就是我们说的基线。基线就是大部分字母所“坐”在的，字体的下降部之上的直线。大部分字体，大写字母总是紧贴基线，并在 基线之上。中文的字体和英文的大写字母情况一样。下图红色的线就是基线。

　　那么，行距就是指两个相邻的行之间，基线的距离。行间距的单位常常使用em，也就是根据字体大小来定义行距。在浏览器中，默认的行距并没有一个准则。更具 W3C提供的建议，它认为默认的行距应该在1.0em到1.2em之间。事实上，在设定行距的时候，排版上有个原则，就是行与行之间的空隙一定要大于单词与单词之间的空隙， 否则的话，阅读者在阅读的时候容易“串行”，造成阅读困难。充足的行距可以隔开每行文字，使得眼睛容易区分上一行或下一行。近几年Web上对于正文的排 版，大多喜欢1.5em的行距，尤其是中文网站。也就是如果使用了12px的字体大小，那么设计师常常喜欢18px的行距。1.5em确实是一个很好的经 验值。事实上，中文的论文的规范也是使用1.5em的行距。

　　2、字间距(Letter-spacing、Tracking)

　　字间距是指一组字母之间相互间隔的距离。字间距影响了一行或者一个段落的文字的密度。

　　3、字距调整(Kerning)

　　字距调整是一种因视觉需要而做的技术处理。简单说，在两个特定的字符连排的时候，你可以为它们单独指定与众不同的字间距。比如当一个大写A后面跟随一个小写 v的时候，两个字符间就会出现视觉上的更大的间距(实际上字间距是一样的)，这是普通的字符间距所无法解决的。如果减少它们的间距，那么其他的字母就会连 成一团。这时候就需要字距调整来处理了。下图就是一个应用了字距调整的例子：

　　段落

　　1、行长(Measure)

　　行长是指一段文字的宽度。如下图：

　　有两个易读性问题与行长有关：

　　行长越长，需要的越大的行距。行距太小，读者阅读换行时容易串行。行距太大，读者阅读行时会感觉到文字不连续。

　　正文中，每行40~70个字母为宜。

　　2、对齐(Alignment)

　　段落的对齐基本有四种：左对齐(flush left)、右对齐(flush right)、居中对齐(centered)和两端对齐(justified)。

　　左对齐是指设置文本内容，调整文字的水平间距，使段落或者文章中的文字沿水平方向向左对齐的一种对齐方式。左对齐使文章左侧文字具有整齐的边缘。同时文字的右边就会不整齐。所以英文对左对齐也叫做ragged right，意指外形参差不齐的右边。右对齐也类同。

　　居中对齐是指设置文本内容，调整文字的水平间距，使段落或者文章中的文字沿水平方向向中间集中对齐的一种对齐方式。居中对齐使文章两侧文字整齐地向中间集中，使整个段落或整篇文章都整齐的

　　两端对齐是指设置文本内容两端，调整文字/单词的水平间距，使其均匀分布在左右页边距之间。两端对齐使两侧文字具有整齐的边缘。

　　使用两端对齐之后，两侧的对齐线会很明晰，文本块的“快”的感觉也会很明显。但是，在英文排版中，当行长很短的时候，使用两端对齐可能会照成某些行词间距过长，某些行词间距过短，这样参差不齐的词间距会感觉十分凌乱，就像一件到处都是补丁的衣服。

　　3、易读性

　　易读性描述的是排印文本阅读时的轻松和舒适程度。实际上，平常的设计的最根本的目的也在于此。除上文中叙述的一些原则外，我另外收罗了一些小小的易读性原则，与大家分享：

　　一份设计上至多使用三种字体的大小。

　　一份设计上至多使用三种字体。

　　要保证一定的对比度，但又不可有过度的对比。阳文(白底黑字)比阴文(黑底白字)要更容易阅读。在#fff的背景上，使用#333的文字要比#000的文字看起来舒服。

　　要注意文字所在的背景。背景要单一。避免背景噪声。

　　“少即是多” 用最少的元素去传达最多的信息。

　　让你的链接看起来像一个链接。

　　本文由深圳网站设计卓越迈创公司发布。请关注张文的来源！

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

　　摘要：了解字体在网站设计中对页面排版的重要性至关重要。本文将探讨如何选择和使用字体，以增强用户体验、可读性和整体美观。

　　1、字体选择

　　选择字体时，考虑以下因素：目标受众、网站基调和内容类型。衬线字体（如 Times New Roman）更具传统性，适用于正式内容。无衬线字体（如 Helvetica）更现代，适用于简洁、现代的设计。

　　2、字体大小

　　字体大小影响页面可读性。正文文本应为 14-16px，标题应更大（如 24-36px）。确保文本在各种设备上都能清晰易读。

　　3、字体间距

　　字间距和行高影响文字的可读性和美观。字间距是字符间的空间，行高是文本行的垂直间距。增加字间距和行高有助于提高可读性。

　　4、字体颜色

　　字体颜色应与网站整体设计相协调。避免使用对比度低的颜色，以确保文字清晰可见。例如，白色文本在黑色背景上可读性最佳。

　　5、字体对齐

　　字体对齐影响网站布局和美观。常用的对齐方式包括居左、居中、居右和两端对齐。不同的对齐方式可创建不同的视觉效果，例如正式感或创造力。

　　Q1:如何选择适合网站的字体？

　　A1:考虑目标受众、网站基调和内容类型。

　　Q2:字体大小对于可读性有多重要？

　　A2:字体大小对页面可读性至关重要，应根据文本类型和设备进行优化。

　　Q3:字体对齐如何影响网站外观？

　　A3:字体对齐可创建不同的视觉效果，例如正式或创造性。

　　字体在网站设计中扮演着至关重要的角色。通过仔细选择和使用字体，您可以增强用户体验、提高可读性并打造美观迷人的页面。

http://gz5.exubo.com