CSS字体选择问题

　

　　在西方国家的字母体系，分红两大字族：serif 及 sans serif。其中 typewriter 打字机字体，虽然也是 sans serif，但因为他是等距字，因此另独立出一个 Typewriter 字族出来。serif 的意思是，在字的笔画开始及结束的地方有额外的装饰，并且笔画的粗细会因直横的不一样而有不一样。相反的，sans serif 就没有这些额外装饰，并且笔画粗细大体上是差很少。一为有衬线字体，二为无衬线。

　　在中文的情形也是有至关于 serif 的字体，例如明（宋）体就是 serif 的，他一般是和 Times Roman 字族来搭配的。而黑体、圆体就至关因而 sans serif 的字体。在中文直排的状况，比较不容易显现 serif/sans serif 之间的差别性，可是在目前中文横排至关的广泛的情形下，以上所述及的易读性、醒目性也是适用于中文。

 

一、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

二、Georgia字体

　　Georgia是一种衬线字体，为著名字型设计师马修·卡特（Matthew Carter）于1993年为微软所设计的做品，具备在小字下仍能清晰辨识的特性，可读性十分优良。Georgia的字符线条较粗，衬线部份也比较钝而平。另外在数字部份也很是不一样，Georgia采用称为“不齐线数字”的数字，特点在于数字会像西文字母般有高矮大小之别。下面是数字显示效果，很是适合于显示文章阅读数：1234567890

接下来看看在各个浏览器中的表现：

IE6	IE7	IE8	IE9
firefox	chrome	safari

三、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

 

四、Lucida Console字体

　　Lucida Console是一种OpenType型的无衬线字体。1993年制做并随微软公司的Windows NT 3.1操做系统发布。有较大的x字高，具备很好的可读性，被普遍用于显示、出版等各类用途。

IE6	IE7	IE8	IE9
firefox	chrome	safari

 

五、宋体

IE6	IE7	IE8	IE9
firefox	chrome	safari

 

六、微软雅黑

IE6	IE7	IE8	IE9
firefox	chrome	safrai

七、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]	534E65877EC69ED1
华文黑体	STHeiti	534E65879ED14F53
华文楷体	STKaiti	534E658769774F53
华文宋体	STSong	534E65875B8B4F53
华文仿宋	STFangsong	534E65874EFF5B8B
丽黑 Pro	LiHei Pro Medium	4E3D9ED1 Pro
丽宋 Pro	LiSong Pro Light	4E3D5B8B Pro
标楷体	BiauKai	680769774F53
苹果丽中黑	Apple LiGothic Medium	82F9679C4E3D4E2D9ED1
苹果丽细宋	Apple LiSung Light	82F9679C4E3D7EC65B8B
Windows
新细明体	PMingLiU	65B07EC6660E4F53
细明体	MingLiU	7EC6660E4F53
标楷体	DFKai-SB	680769774F53
黑体	SimHei	9ED14F53
宋体	SimSun	5B8B4F53
新宋体	NSimSun	65B05B8B4F53
仿宋	FangSong	4EFF5B8B
楷体	KaiTi	69774F53
仿宋_GB2312	FangSong_GB2312	4EFF5B8B_GB2312
楷体_GB2312	KaiTi_GB2312	69774F53_GB2312
微软正黑体	Microsoft JhengHei	5FAEx8F6F6B639ED14F53
微软雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
Office
隶书	LiSu	96B64E66
幼圆	YouYuan	5E7C5706
华文细黑	STXihei	534E65877EC69ED1
华文楷体	STKaiti	534E658769774F53
华文宋体	STSong	534E65875B8B4F53
华文中宋	STZhongsong	534E65874E2D5B8B
华文仿宋	STFangsong	534E65874EFF5B8B
方正舒体	FZShuTi	65B96B6382124F53
方正姚体	FZYaoti	65B96B6359DA4F53
华文彩云	STCaiyun	534E65875F694E91
华文琥珀	STHupo	534E6587742573C0
华文隶书	STLiti	534E658796B64E66
华文行楷	STXingkai	534E6587884C6977
华文新魏	STXinwei	534E658765B09B4F

页面的附件能够在这里下载：

font.rar