The choose of web page font/网页字体选用

---------------------------------------读书笔记·转载请注明---------------------------------------

前几天在作品集里发了一个自己第一次设计的网页作品，因为刚刚开始学习，所以很多理论知识都不懂，只是靠感觉设计了一个作品，感觉还不错。本来以为这么有天赋的作品肯定要上首页推荐的，后来被iconbox队长批了，才知道太自大啦，很多细节都没处理好，因为其中问题最大的是字体的选用，所以我在网上找了一些资料，跟大家分享一下网页设计中字体的使用要主要的几个要点。因为我也是边学边感悟，所以这里整理出来的，大部分是别人的精华，大家一起加油！

相信大家原本对字体的种类已经有过一些了解，分类：
Serif 衬线字体

这些字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写A 两条腿底部的短线。Serif字体的例子包括
Times、Georgia 和 New Century Schoolbook。

Sans-serif 无衬线字体
这些字体是成比例的，而且没有上下短线。Sans-serif字体的例子包括 Helvetica、Geneva、Verdana、Arial 或Univers。
Monospace等宽字体
Monospace字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视 频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m有相同的宽度。这些字体 可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace字体，而不论是否有上下 短线。Monospace字体的例子包括 Courier、Courier
New 和 Andale Mono。
Cursive 模仿手写字体
这些字体试图模仿人的手写体。通常，它们主要由曲线和Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive字体的例子包括 Zapf Chancery、Author和Comic Sans。
Fantasy 艺术装饰字体
这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括Western、Woodblock 和 Klingon。

----------------------------------------------
来自：w3school CSS字体系列
----------------------------------------------

不过呢，在通常网页字体选用中，有一些规则是大家要遵守的：（注意我这里说的是‘通常’就是以大准则走的，排除创意想法对字体的选用）

我总结了一下几个要点：

1、尽量选用经典字体

(1)无衬线字体组合：（组合的意思是，在网页编写的过程中，可以提供一系列字体组合，让没有安装第一种字体的用户在浏览网页的时候可以自动加载第二种字体，如果第二种也没有...以此类推下去，designer们就当做这些字体都是最常用的就行啦:)）

许多网站都倾向于使用无衬线字体，因为大部分人觉得无衬线字体具有更高的识别度。
· Arial,Helvetica, sans-serif
Helvetica字体看起来跟Arial差不多，对很多人来说甚至是一样的。最重要的是，这两种字体覆盖了大部分的操作系统。

· Verdana, Arial, Helvetica,sans-serif
Verdana跟Arial很像，但相比之下更大，更宽，字距也比较大，理论上这样的识别性也会提高，但是经验表明，这会拉低人们的阅读速度。不过Verdana默认只安装在Windows和MacOS X中。

(2)衬线字体组合：

因为识别性问题，大部分网站不使用衬线字体，如果用到，一般会使用以下组合：
· TimesNew Roman, Times,
serif

(3)等宽字体组合：

等宽字体最大的特性在与每个字母的宽度都是相同的，即使是w和i，一般用在源代码的显示中
· CourierNew, Courier, monospace

----------------------------------------------
翻译自：Which Font Should I Use for My Web Page? Tips onChoosing Fonts for Your Website
字体参考：Arial Verdana Times
NewRoman Courier
----------------------------------------------

2、字体大小
(1) 字体大小一般设置为偶数像素，可以避免出现锯齿;
(2)字体单位：常用的是px(像素)，em(字高)，1em=16px，12px=0.75em,简化font-size的换算，在css的body选择器中声明font-size=62.5%，可以使em值变为16px*62.5%=10px,这样12px=1.2em,
10px=1em。在网页设计中，最好使用em为单位(当然在ps中，字体是以磅为单位，所以在这里强调的，一般是在转化为编码页面的时候才用的单位)因为em有两个优点：1.em的值并不是固定的，可以随着窗口布局适当调节字体大小；2.em会继承父级元素的字体大小；
(3) 浏览器默认的字体大小为：1em(16px)。

----------------------------------------------
参考：网页颜色搭配技巧文字字体、字号、字体排版等 em
如何给你的网页选择合适的字体？
----------------------------------------------

3、字体编排、行距
(1) 行距一般为定位10:12的比例，即假如字体是10点，那行距就为12点，以这个比例为准。
(2)行距一般不超过自高的200%，这样会让整个版面看起来间隙太大，有一种落空的感觉。
(3)要记住，将字体对齐，会有很不一样的效果哦。

----------------------------------------------
参考：字体的大小、粗细和字距行距
----------------------------------------------

4、最后
放上我设计的那张粗糙的作品，和修改过字体之后的作品，果然有不一样的效果！修改的时候主要针对文字进行修改，将识别性不高的衬线文字改为无衬线文字，在字体大小上和对齐方面也进行了修改，虽然还存在排版和其他各方面的问题，但是感觉收获了，才是最重要的！
感谢iconbox队长对我的耐心点评。也希望文章能帮到很多跟我一样的初学者！活到老学到老:)
（点开可以看大图/Click to get full-size）







----------------------------------------------
来自：iconfans
----------------------------------------------