Contents
  1. 1. 字体排列顺序
  2. 2. 西文字体介绍
  3. 3. 默认字体样式

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

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

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;

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

Contents
  1. 1. 字体排列顺序
  2. 2. 西文字体介绍
  3. 3. 默认字体样式