在西方国家的字母体系，分成两大字族：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 | |
页面的附件可以在这里下载：
参考资料：
http://site.douban.com/209228/widget/notes/13176390/note/328828566/ 身边的字体：Arial（上）
http://niaolei.org.cn/posts/47509 最好看的网页字体
http://p.t.qq.com/longweibo/index.php?id=181378069288960 Font-那些事儿
http://www.csh7.cn/sjbj/1189.html 有衬线字体与无衬线字体比较
http://blog.sina.com.cn/s/blog_6e8fff770100on1i.html 网页常用的安全字体及CSS写法
http://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E9%BB%98%E8%AE%A4%E5%AD%97%E4%BD%93%E4%B8%8Ecss%E5%AD%97%E4%BD%93/ 页面可用性之浏览器默认字体与CSS中文字体
http://kb.cnblogs.com/page/192018/ Serif和Sans-serif字体的区别
posted on
