在西方国家的字母体系,分成两大字族: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

页面的附件可以在这里下载:

font.rar

参考资料:

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字体的区别

CSS字体记录的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. Css字体中英文对照表

    css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...

  4. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  5. 2.css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  6. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  7. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  8. css字体中英文对照表(转)

     在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...

  9. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

随机推荐

  1. 转的: 重绘ListView 修改标题颜色

    1.owerDraw 设置为true 2.实现事件 DrawColumnHeader DrawItem DrawSubItem private void listView1_DrawColumnHea ...

  2. RTC,登陆后添加权限值

    修改单元:rtcMW.DM.Main; 修改组件:fnLogin 在方法中添加: 服务端: const SQL_SELECT_USER = 'SELECT * FROM Users WHERE Use ...

  3. dedecms /include/filter.inc.php Local Variable Overriding

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 filter.inc.php这个文件在系统配置文件之后,里面有forea ...

  4. maven小项目注册服务(三)--web模块

    java的web应用打包方式一般为war它和jar的区别就是包含了更多的资源和文件,如JSP文件,静态资源文件,servlet等等.war包的核心就WEB-INF文件夹下必须有一个web.xml 的配 ...

  5. Redis-PHP-Hash 表相关API

    Hashes 相关 ================================ hDel - 删除一个哈希 key hExists - 检查哈希 key是否存在 hGet - 获得某哈希 key ...

  6. opensatck 在启动的时候注入额外的信息

    在配置ceph的时候建议使用metadata/cloud-init来注入额外的信息. https://raymii.org/s/tutorials/Automating_Openstack_with_ ...

  7. 使用 boost 进行 CRC32 校验

    使用 boost 进行 CRC32 校验 - firebird321的专栏 - 博客频道 - CSDN.NET 使用 boost 进行 CRC32 校验 分类: 文件操作 2008-06-06 18: ...

  8. Linux 学习 (四) 帮助命令

    Linux达人养成计划 I 学习笔记 man 命令 获取指定命令的帮助 man的级别 1:查看命令的帮助 2:查看可被内核调用的函数的帮助 3:查看函数和函数库的帮助 4:查看特殊文件的帮助(主要是/ ...

  9. ASP.NET Core 与支付宝开发文档

    一.目录 ASP.NET Core 2.0 使用支付宝PC网站支付 ASP.NET Core 2.0 支付宝当面付之扫码支付 常见使用问题解答 已有多个公司数个项目用本组件并上线,稳定使用. 二.项目 ...

  10. Echarts x轴文本内容太长的几种解决方案

    Echarts 标签中文本内容太长的时候怎么办 ? - 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111", ...