CSS字体记录

时间:2024-04-15 19:55:31

 

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