CSS字体记录

简介:  在西方国家的字母体系,分成两大字族:serif 及 sans serif。其中 typewriter 打字机字体,虽然也是 sans serif,但由于他是等距字,所以另独立出一个 Typewriter 字族出来。serif 的意思是,在字的笔画开始及结束的地方有额外的装饰,而且笔画的粗细会因直横的不同而有不同。相反的,sans serif 就没有这些额外装饰,而且笔画粗细大致上是差不多。一为有衬线字体,二为无衬线。
+关注继续查看

23.png


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


24.png


25.png26.png


  在中文的情形也是有相当于 serif 的字体,例如明(宋)体就是 serif 的,他通常是和 Times Roman 字族来搭配的。而黑体、圆体就相当于是 sans serif 的字体。在中文直排的情况,比较不容易显现 serif/sans serif 之间的差异性,但是在目前中文横排相当的普遍的情形下,以上所述及的易读性、醒目性也是适用于中文。


27.png28.png


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 设计意图不同的地方。


29.png

Arial 与Helvetica 重叠在一起的图。 共通的部分涂白,黑色的Helvetica 多出来部分的面积比较多,由此可以看出它线条比较粗,排版时的灰度也会比较深

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


30.png


2、Georgia字体


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



31.png


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


32.png


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的字体效果),对于中文字体,会自动采用宋体这个默认字体来显示

33.png


4、Lucida Console字体


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


34.png


5、宋体


35.png


6、微软雅黑


36.png


7、Verdana


  Verdana是一套无衬线字体,它在小字上有结构清晰端整、阅读辨识容易等高品质表现,成为许多领域爱用的标准字型之一。此字体设计源起于微软字型设计小组的维吉尼亚·惠烈(Virginia Howlett)希望设计一套具有高辨识性、易读性的新字型以供屏幕显示之用,于是她邀请了世界顶级字型设计师之一的马修·卡特(Matthew Carter)操刀,以Frutiger字体及爱德华·约翰斯顿(Edward Johnston)为伦敦地铁所设计的字体为蓝本,并由Monotype公司的字型微调专家汤姆·瑞克纳(Tom Rickner)担任手工微调,字体结构与Tahoma(同为马修·卡特所设计)很相似。“Verdana”一名是由“verdant”和“Ana”两字所组成的。“verdant”意为“苍翠”,象征着“翡翠之城”西雅图及有“常青州”之称的华盛顿州。“Ana”则来自于维吉尼亚·惠烈大女儿的名字。

37.png


以下为各个大型网站的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
丽黑 ProLiHei Pro Medium\4E3D\9ED1 Pro
丽宋 ProLiSong 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
仿宋_GB2312FangSong_GB2312\4EFF\5B8B_GB2312
楷体_GB2312KaiTi_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

 

相关文章
|
3天前
|
JavaScript 前端开发
CSS3 transform 字体模糊问题
CSS3 transform 字体模糊问题
|
3天前
|
前端开发
CSS 字体对齐
CSS 字体对齐
|
20天前
|
前端开发
css文字字体间距设置
css文字字体间距设置
16 0
|
1月前
|
Web App开发 前端开发 iOS开发
css引用字体问题
css引用字体问题
|
2月前
|
前端开发
【CSS】CSS字体样式【CSS基础知识详解】
【CSS】CSS字体样式【CSS基础知识详解】
39 1
|
3月前
|
Web App开发 前端开发 iOS开发
CSS3 字体抗锯齿渲染
CSS3 字体抗锯齿渲染
19 0
|
3月前
|
前端开发
|
3月前
|
前端开发
css字体模糊,多重边框demo效果示例(整理)
css字体模糊,多重边框demo效果示例(整理)
|
3月前
|
Web App开发 前端开发 JavaScript
CSS基础:基础选择器、字体和文本样式
CSS基础:基础选择器、字体和文本样式
31 0
|
4月前
|
前端开发 JavaScript
HTML&CSS Day03 CSS字体及文本样式
HTML&CSS Day03 CSS字体及文本样式
33 0
相关产品
云迁移中心
推荐文章
更多