网页中font-family的属性解析

web中文字体的选择

web应用程序因其跨平台性被普遍应用，可是也为web应用程序运行带来了复杂的运行环境，好比各个系统字体的区别以及中英文字体显示的区别。

字体分类

网页经常使用字体一般分为5类：serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)，这些通用的名称容许用户代理从相应集合中选择一款字体。

• serif 字体在字符笔画末端有叫作衬线的小细节，这些细节在大写字母中特别明显。
• sans-serif 字体在字符笔画末端没有任何细节，与serif字体相比，他们的外形更简单。
• monospace 字体，每一个字母的宽度相等，一般用于计算机相关书籍中排版代码块。
• fantasy 和 cuisive 字体在浏览器中不经常使用，在各个浏览器中有明显的差别。

网页经常使用字体

##### Sans-serif:

• Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，很是受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下因为Hinting的缘由显示很糟糕。

• Arial: Helvetica的「克隆」，和Helvetica很是像，细节上好比R和G有小小差异。若是字号过小，文字太多，看起来会有些累眼。Win和Mac显示都正常

• Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。

• Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍能够清楚显示，可是字体细节缺失严重，最好别作标题。

• Tahoma: 也是humanist风格，字体和Verdana有点像，可是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5以后默认也有安装。

• Trebuchet MS: 为微软设计的一个humanist风格字体，我的以为个性太过突出，用得很差会不搭。

Serif：

• Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。

• Times: Times是为了报纸而设计的，特色是能够在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times做为正文，被骂得很惨以后换成了Georgia。

中文：

• 宋体：Win最多见的字体，小字体点阵，大字体TrueType，可是大字体并很差看，因此最好别作标题。

• 微软雅黑：Vista以后新引入的字体，打开Cleartype以后显示效果不错，不开Cleartype发虚。

• 华文细黑：Mac下的默认中文。

font-family写法

• 因为某些系统可能不存在中文字体的中文名，因此写中文字体别忘了添加英文名

• 由于英文字体的渲染一般比用中文字体渲染的效果好，因此英文字体声明在中文字体前。

• 尽可能在各个系统中都显示的最好

由此可得出font-family的写法：

font-family: Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑",SimSun, "宋体" ;

这样写基本能够保证主流系统在显示网页字体的时候效果最好，固然要注意的是：设计师在设计网页的时候也须要照顾不一样的平台的字体属性
更多请访问：http://www.zuoyan.space/