浅谈 Web 中的文本显示样式

Question

Web中的文本显示样式直接影响着网站整体的视觉效果，选择合适的字体大小、字体样式、字体颜色将会为我们的网页加分不少，本文就围绕着文本显示样式谈谈我的看法。

字体选择

还记得刚开始工作那会儿，喜欢使用写花哨的字体，像手写体、娃娃字体、毛笔字等，自己看着觉得好看，其实对于用户来说就觉得你这网站不正经，除非你的网站主题就是这样的，我们还是要以用户体验为中心，在传达内容信息的同时，给用户一种舒适视觉体验。

一般网站客户端计算机中都安装有多种字体，浏览器会使用默认字体显示网页，如WindowsXP中文版操作统默认字体是宋体或新宋体，在后来的 windows操作系统中，以微软雅黑为默认字体，这种字体显示得更加清晰，取代了XP系统下默认中文宋体，支持高清显示ClearType功能。

以上这些字体在大多数电脑上都有安装，但是，如果你在制作网页的时候，如果选择了比较特殊的字体，而这种字体用户电脑里并没有，那么用户浏览网页时仍不能显示这些字体，这些字体仍以默认的宋体或者雅黑字体来显示。

所以为了适合更多的用户浏览，我们在制作网页的时候应该使用宋体或者雅黑来作为网页的基准字体，尽量少使用特殊字体。当你不能确保所设置字体在所有浏览者电脑中都安装时，使用一种通用字体是可行的办法。

微软雅黑

微软雅黑可以说是网站字体的标配，目前80%的网站都是使用的这个字体，而且Windows Vista以上的系统默认就有这个字体，不用担心显示的问题，而且只要设置了合适的字体大小和颜色，看着就很舒服。

宋体

宋体是为适应印刷术而出现的一种汉字字体。笔画有粗细变化，而且一般是横细竖粗，末端有装饰部分（即「字脚」或「衬线」），点、撇、捺、钩等笔画有尖端，属于衬线字体（Serif），常用于书籍、杂志、报纸印刷的正文排版。宋体是生而具来的印刷体，产生于雕版，成型于明朝。

微软正黑

微软正黑，又称正黑，是微软公司为其新一代操作系统Vista开发的中文字体。该字体将作为Vista中国台湾地区的默认字体，以支持高清显示的ClearType功能，大陆也有很多人使用，看起来很个性，而且比微软雅黑更细。

英文字体

而对于英文字体，可选择的字体类型相对会多一些，绝大多数电脑上都装有这些英文字体，制作网页时选择什么类型关系并不太大，只要看着美观就行。英文通用字体主要包括下面几类：

• sans-serif：这种字体是一种有比例但没有衬线字体，常见字体是Arial。
• cursive：这种字体是模拟人的笔迹，这种字体大部分是由曲线和比衬线字体更强笔画修饰组成，常用字体是ComicSans。
• monospace：这是一种无比例字体，用于模拟打字机打出字体，这些字体中每个字符都占有同样宽度，常用字体是Courier。
• serif：这是一种成比例有衬线字体，成比例是指字体中所有字母根据它们不同尺寸占据不同宽度。衬线是指字体上附加装饰性细线，如小写字母会在项部和底部附加细线。常用字体有Times New Roman。

小节

一般常规网站，首选微软雅黑字体，替补字体为宋体或者黑体，英文字体字体使用Arial，替补字体Georgia，如果是特殊的网页，比如中国风网站、可能会使用一些复古的字体。

字体大小

对于很多网页设计师来说，很习惯的使用某一个固定的字体大小，比如14px或12px。有时候我们设计网页时并不会十分仔细的考虑字体大小的选择，因为在国内网站来说12px和14px基本成了所有网页字体的标准大小，但在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验，所以研究字体和浏览器之间的关系还是有些必要的。至少可以让我们从更深层面认识我们为何要使用这种大小的字体。

文字大小，是用户体验中的一个重要部分。不同的分辨率，不同的显示器尺寸，不同的DPI，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。最好还是根据用户的分辨率给用户一个比较体贴的默认字号。

屏幕上的一切字号单位（px、pt、em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。

物理尺寸

首先假定一个我们希望达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，计算可得它的高度约是4.32mm，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？

用户主要的分辨率和对应的屏幕大小

要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。

主流屏幕尺寸的物理宽度

现在的显示器长宽比不仅有4:3的标准屏、16:10的宽屏，还有更多不规则比例，为了在不同长宽比的显示器之间进行比较，统一使用横向分辨率来统计。用主流尺寸和长宽比（假设像素的长和宽相同）计算出屏幕宽度（英寸），再换算成公制（毫米），将其一一对应就可看出屏幕大小的趋势。再结合各分辨率的用户分布，结果如下图所示（图片中每个点对应一个分辨率，横轴为屏幕横向的像素数，纵轴为该屏幕的物理宽度，气泡大小表示使用该分辨率的用户人数。其中蓝色气泡表示标准屏，紫色表示宽屏）：最大的三个气泡分别是1024*768,1280*1024,1280*800。

不同显示器上的字号大小

用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数，就可以得到在不同分辨率下所需的字号。例如要显示4.32mm见方的文字，各分辨率下分别需要如下的字号（对笔记本和台式机分别统计）：

可以看出笔记本和台式机的尺寸相差很大，为方便使用，使用各分辨率的主流尺寸或平均尺寸计算出指定字号在每个分辨率下所需的字号。（下图去掉了基本只用在笔记本上的那些分辨率），以4.32mm、3.77mm、3.25mm为例（17寸1280*1024分辨率下的16、14和12号字）：

为保持固定物理尺寸，各主流显示器下所需字号与分辨率的关系

由于在未开启ClearType的情况下，一些中文字体在非偶数字号下的显示效果欠佳，所以一般建议使用12、14、16、18、22px等偶数字号。也就是对某个分辨率选择离它最近的偶数字号。例如：屏幕横向分辨率在1100以下的采用14px，1100到1500采用16px，1500以上采用18px，依此类推。

到人眼的距离

虽然笔记本的字号远小于台式机，可是实际并没有给我们带来那么大的不便，这是因为一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。当上网本越来越小时（极端的例子就是手机），人们使用的时候可能会拿的更近，这样视角更大。反之当显示器越来越大时（24寸甚至更大），出于整体视角等方面考虑，人们也可能离屏幕远些，从而减小了视角。

定量来说由于文字大小h（4~5mm）相对人眼到文字的距离d（30~60cm）非常小，可近似认为视角θ正比于h,并与d成反比（θ≈tgθ=h/d）。也就是说同样大小的文字，距离二尺时看到的只有距离一尺时的一半大小。

也就是说，显示器只能传达一个大概的尺寸，每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。面对越来越多的笔记本用户，前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果，具体就靠用户去自我调整了。

字体颜色

颜色可能最能提现一个网站的风格和品质，这里并不建议大家直接使用黑色作为网页的字体颜色，而是使用一点灰色看起来更协调，饱和度高的颜色基本都不建议使用，除非你想要重点突出什么内容。

总结

合适的字体显示样式，能为我们的网页创造价值，人都是爱美的，美好的东西都想多看两眼，也许就是那不经意的回眸，他就中意你了，字体显示样式虽然只是Web中的一小部分内容，但是这些细节我们值得深究。