从Web字体谈起——默认字体样式设置

在网页设计中字体的设置不可小觑，好的字体让人赏心悦目，凌乱的字体让人抓狂，如何正确的设置网页中的字体便是今天讨论的话题。在网页设计中字体设置时要考虑到不同系统、不同浏览器、不同渲染方式的字体表现，选择一套合适的字体设置值得深究，为保证各种平台环境中的表现效果兼容性，需要设置一套默认的字体样式。

首先我们来看看各大网站的默认字体样式的设置：

Google:  font-family: arial,sans-serif;
Yahoo:  font: 13px/1.25 "Helvetica Neue",Helvetica,Arial;
Apple:  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;

Baidu:  font: 12px arial;
Weibo:  font: 12px/1.125 Arial,Helvetica,sans-serif;
QQ:     font: 12px "宋体","Arial Narrow",HELVETICA;
Sina:   font-family: "SimSun","宋体","Arial Narrow";
163 :   font:12px/1.5 \5b8b\4f53,Arial,sans-serif;
zhihu:  font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif;

在每一套字体设置中都有Arial字体，这是因为Arial的广泛性。Arial是Monotype为了与Helvetica竞争而设计的无衬线体字体，微软从在Windows 3.1上推出购自苹果电脑的TrueType技术起Arial就一直跟随视窗系统分发。Windows和Mac都预装了这款字体,自然她便成了安全字体，同时也成为了大多数网站的首选字体。单从兼容性上来看，Arial的设置无可非议，全平台兼容也让他成为网页设计中最常见的字体。但是从美观度上说，许多设计师都比较偏袒他的前辈Helvetica，这也是许多网站将Helvetica放在他前面的原因。

字体排列顺序

CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。

有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。

字体族名称（family-name）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。

族类（generic family） ,一个族类是一组具有统一外观的字体族。sans-serif就是一例，它代表一组没有“脚”的字体。serif代表一组有脚的字体，monospace代表则代表一组等宽字体

Weibo: font: 12px/1.125 Arial,Helvetica,sans-serif;

新浪微博中的字体设置便是这样遵循优先级排序，当访问者设备中没有安装Arial字体，就调用Helvetica字体，当Helvetica字体也没有时，就直接调用系统中同族的sans-serif无衬线体字体。

西文字体介绍

Helvetica

Helvetica是一种广泛使用的西文无衬线字体，是瑞士图形设计师马克斯·米耶丁格（Max Miedinger）于1957年设计的。Helvetica被视作现代主义在字体设计界的典型代表。许多著名的字体都是有它派生出来的，例如Windows中的默认字体Arial、Linux中的默认字体Nimbus Sans、斯滕佩尔公司于1983年发布改进版本Helvetica Neue。此外它还是Mac OS系统的默认字体，所以将它作为首位候选字体无可厚非。

Tahoma

Tahoma是一个十分常见的无衬线字体，字体结构和Verdana很相似，其字符间距较小，而且对Unicode字集的支援范围较大。Tahoma和Verdana师出同门，同为名设计师马修·卡特（Matthew Carter）的作品，由微软在1994年推出。许多不喜欢Arial字体的人常常会改用Tahoma来代替，除了是因为Tahoma很容易取得之外，也是因为Tahoma没有一些Arial为人诟病的缺点，例如大写“I”与小写“l”难以分辨等。

Verdana

Verdana是一套无衬线字体，由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现，因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。它是由Monotype公司的字型微调（Hint）专家汤姆·瑞克纳（Tom Rickner）担任手工微调，字体结构与Tahoma（同为马修·卡特所设计）很相似，微软将Verdana纳入网页核心字体之一。根据可用性大师 Jackob Nielsen 的调查，在目前计算机显示器的 dpi 下，无衬线字体比有衬线字体更易读。用户调研显示，Verdana 字体是易读性最高的。

Times New Roman

Times New Roman是一款最常用的衬线字体，它由Monotype公司于1932年发表，并为英国的《泰晤士报》首次采用，故得其名。Times New Roman是Windows中的系统默认衬线体字体，作为衬线体的安全候选字体十分适合。后续通过Times New Roman派生发展的衬线字体Times Roman、Times、 Georgia都得到了广泛应用。

Georgia

Georgia是一种衬线字体，为著名字型设计师马修·卡特（Matthew Carter）于1993年为微软所设计的作品，具有在小字下仍能清晰辨识的特性，可读性十分优良。Georgia与Times New Roman十分相似，却又做出了许多改进，字符线条变粗，衬体部分平滑，另外数字部分还采用了“不对线数字”，有高矮大小之分

默认字体样式

通过对不同字体、不同平台、不同渲染方式的研究，在现行主流终端设备中，无衬线体比有衬线体更易读。无衬线体更适合作为网页的默认全局字体设置，根据font-family的优先级排序属性，渐进增强的考虑字体选择顺序。在保证良好兼容性的情况下，建议设置如下默认字体设置：

font-family: Helvetica,Tahoma,Arial,Sans-serif;

在网页设计中，不影响可读性的情况下适当使用衬线体，能使部分设计更加突出、活泼。例如在标题、数字、着重上的使用。一下便是对衬线体环境下的字体设置：

font-family: Geogia,"Times New Roman", Times, serif;

以上字体设置仅对西文字体环境中的研究，要想获得中文环境中的高质量的字体表现，还得考虑各个平台中默认中文字体的渲染以及中英文混排等问题，这将在后续的文章中另作学习。

http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5596492

从Web字体谈起——默认字体样式设置

相关推荐