在西方国家的字母体系,分成两大字族:serif 及 sans serif。其中 typewriter 打字机字体,虽然也是 sans serif,但由于他是等距字,所以另独立出一个 Typewriter 字族出来。serif 的意思是,在字的笔画开始及结束的地方有额外的装饰,而且笔画的粗细会因直横的不同而有不同。相反的,sans serif 就没有这些额外装饰,而且笔画粗细大致上是差不多。一为有衬线字体,二为无衬线。
在中文的情形也是有相当于 serif 的字体,例如明(宋)体就是 serif 的,他通常是和 Times Roman 字族来搭配的。而黑体、圆体就相当于是 sans serif 的字体。在中文直排的情况,比较不容易显现 serif/sans serif 之间的差异性,但是在目前中文横排相当的普遍的情形下,以上所述及的易读性、醒目性也是适用于中文。
1、Arial字体
Arial是一套随同多套微软应用软件所分发的无衬线体TrueType字型。虽然比例及字重(weight)和Helvetica极之相近,但 Arial其实是Monotype Grotesque系列的变种。设计Arial时考虑到会在电脑上面使用,在字体及字距上都作了一些细微的调整和变动,以增加它在电脑屏幕上不同分辨率下的可读性。
Arial 常常跟Helvetica 搞混,也常被当作是没有Helvetica 时的替代字体使用。事实上Arial 确实就是故意做得跟Helvetica 很相似,连每个字母的宽度都刻意做得一模一样。
Arial 与Helvetica 有一个差异,虽然差异不大,Arial 拥有比Helvetica 更大的字腔与字间。若用排版在展示文字(display) 用途, Arial 排起来比起Helvetica,就是有种神秘的松松垮垮的感觉,理由之一就是因为Arial 白空间取得比较松,让它比较适合用在(低解析度的)内文排版上。请记得他是为了240dpi 的雷射印表机设计的。它与Helvetica 字母宽度相同,但字间取得比较大,当然每个字都稍微窄一点,或是线有稍微细一点。很~~仔细看的话,Arial 排版的灰度会稍微比较明亮一点。真的差异不是很大,但这也是与Helvetica 设计意图不同的地方。
Arial 与Helvetica 重叠在一起的图。 共通的部分涂白,黑色的Helvetica 多出来部分的面积比较多,由此可以看出它线条比较粗,排版时的灰度也会比较深
接下来看看在各个浏览器中的表现:
IE6 | IE7 | IE8 | IE9 |
firefox | chrome | safari | |
2、Georgia字体
Georgia是一种衬线字体,为著名字型设计师马修·卡特(Matthew Carter)于1993年为微软所设计的作品,具有在小字下仍能清晰辨识的特性,可读性十分优良。Georgia的字符线条较粗,衬线部份也比较钝而平。另外在数字部份也非常不同,Georgia采用称为“不齐线数字”的数字,特色在于数字会像西文字母般有高矮大小之别。下面是数字显示效果,非常适合于显示文章阅读数:1234567890
接下来看看在各个浏览器中的表现:
IE6 | IE7 | IE8 | IE9 |
firefox | chrome | safari | |
3、Tahoma字体
Tahoma是一个十分常见的无衬线字体,字体结构和Verdana很相似,其字符间距较小,而且对Unicode字集的支援范围较大。Tahoma和Verdana师出同门,同为名设计师马修·卡特的作品,由微软在1999年推出。许多不喜欢Arial字体的人常常会改用Tahoma来代替,除了是因为Tahoma很容易取得之外,也是因为Tahoma没有一些Arial为人诟病的缺点,例如大写“I”与小写“l”难以分辨等。Tahoma被采用为Windows 2000、Windows XP、Windows Server 2003及Sega游戏主机Dreamcast等系统的默认字型。Tahoma是种非常圆滑的字体。
Tahoma只能显示英文(也就是会所英文才有tahoma的字体效果),对于中文字体,会自动采用宋体这个默认字体来显示
IE6 | IE7 | IE8 | IE9 |
firefox | chrome | safari | |
4、Lucida Console字体
Lucida Console是一种OpenType型的无衬线字体。1993年制作并随微软公司的Windows NT 3.1操作系统发布。有较大的x字高,具有很好的可读性,被广泛用于显示、出版等各种用途。
IE6 | IE7 | IE8 | IE9 |
firefox | chrome | safari | |
5、宋体
IE6 | IE7 | IE8 | IE9 |
firefox | chrome | safari | |
6、微软雅黑
IE6 | IE7 | IE8 | IE9 |
firefox | chrome | safrai | |
7、Verdana
Verdana是一套无衬线字体,它在小字上有结构清晰端整、阅读辨识容易等高品质表现,成为许多领域爱用的标准字型之一。此字体设计源起于微软字型设计小组的维吉尼亚·惠烈(Virginia Howlett)希望设计一套具有高辨识性、易读性的新字型以供屏幕显示之用,于是她邀请了世界*字型设计师之一的马修·卡特(Matthew Carter)操刀,以Frutiger字体及爱德华·约翰斯顿(Edward Johnston)为伦敦地铁所设计的字体为蓝本,并由Monotype公司的字型微调专家汤姆·瑞克纳(Tom Rickner)担任手工微调,字体结构与Tahoma(同为马修·卡特所设计)很相似。“Verdana”一名是由“verdant”和“Ana”两字所组成的。“verdant”意为“苍翠”,象征着“翡翠之城”西雅图及有“常青州”之称的华盛顿州。“Ana”则来自于维吉尼亚·惠烈大女儿的名字。
IE6 | IE7 | IE8 | IE9 |
firefox | chrome | safari | |
以下为各个大型网站的body的字体设置:
人人网:body{font-family:Tahoma,Verdana,STHeiTi,simsun,sans-serif;}
腾讯网:body{font-family:"宋体","Arial Narrow";}
淘宝网:body{font-family:12px/1.5 tahoma,arial,\'Hiragino Sans GB\',宋体,sans-serif}
开心网:body{font-family:tahoma,helvetica,arial,\'bitstream vera sans\',sans-serif}
新浪微博:body{font-family:12px/1.125 Arial,Helvetica,sans-serif}
中文字体与英文、unicode 对应表
中文名 | 英文名 | Unicode | |
---|---|---|---|
Mac OS | |||
华文细黑 | STHeiti Light [STXihei] | \534E\6587\7EC6\9ED1 | |
华文黑体 | STHeiti | \534E\6587\9ED1\4F53 | |
华文楷体 | STKaiti | \534E\6587\6977\4F53 | |
华文宋体 | STSong | \534E\6587\5B8B\4F53 | |
华文仿宋 | STFangsong | \534E\6587\4EFF\5B8B | |
丽黑 Pro | LiHei Pro Medium | \4E3D\9ED1 Pro | |
丽宋 Pro | LiSong Pro Light | \4E3D\5B8B Pro | |
标楷体 | BiauKai | \6807\6977\4F53 | |
苹果丽中黑 | Apple LiGothic Medium | \82F9\679C\4E3D\4E2D\9ED1 | |
苹果丽细宋 | Apple LiSung Light | \82F9\679C\4E3D\7EC6\5B8B | |
Windows | |||
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 | |
细明体 | MingLiU | \7EC6\660E\4F53 | |
标楷体 | DFKai-SB | \6807\6977\4F53 | |
黑体 | SimHei | \9ED1\4F53 | |
宋体 | SimSun | \5B8B\4F53 | |
新宋体 | NSimSun | \65B0\5B8B\4F53 | |
仿宋 | FangSong | \4EFF\5B8B | |
楷体 | KaiTi | \6977\4F53 | |
仿宋_GB2312 | FangSong_GB2312 | \4EFF\5B8B_GB2312 | |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 | |
微软正黑体 | Microsoft JhengHei | \5FAE\x8F6F\6B63\9ED1\4F53 | |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 | |
Office | |||
隶书 | LiSu | \96B6\4E66 | |
幼圆 | YouYuan | \5E7C\5706 | |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 | |
华文楷体 | STKaiti | \534E\6587\6977\4F53 | |
华文宋体 | STSong | \534E\6587\5B8B\4F53 | |
华文中宋 | STZhongsong | \534E\6587\4E2D\5B8B | |
华文仿宋 | STFangsong | \534E\6587\4EFF\5B8B | |
方正舒体 | FZShuTi | \65B9\6B63\8212\4F53 | |
方正姚体 | FZYaoti | \65B9\6B63\59DA\4F53 | |
华文彩云 | STCaiyun | \534E\6587\5F69\4E91 | |
华文琥珀 | STHupo | \534E\6587\7425\73C0 | |
华文隶书 | STLiti | \534E\6587\96B6\4E66 | |
华文行楷 | STXingkai | \534E\6587\884C\6977 | |
华文新魏 | STXinwei | \534E\6587\65B0\9B4F |