Yoho, 大家好，又是我哟~

首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的，欢迎大家继续关注哦。

上次我讲了在实际应用font-family时会遇到的浏览器兼容性问题。这次我 要从操作系统方面来讲如何安排字体族。另外，由于中文字体的选择范围实在太小，所以本章中设计的内容主要以西文字体为主，比较适合上一章中的“方案二”。

– 不同操作系统的常用字体

如何让你的字体在任何系统，任何电脑上都看起来一致？

原则很简单。尽可能使用所有操作系统都存在的字体。虽然听起来比较简单，但是其实还是很tricky的一件事情。为此，你首先需要了解常用的操作系统的字体。

下面我会列出一些除了windows以外的常用操作的默认字体。windows么……想来大家应该已经很熟悉了

– Mac OS X 中的常用字体

一个典型安装的 Mac OS X 10.4 会包含以下常用西文字体（某些非常用字体就不列出了）：

– 典型的 Linux 字体

典型的Linux只有kernel，所以字体要自己安装

既然这样，自然无法正确预测使用Linux的用户装了啥字体。不过好在大家都会装一些常用的字体，因此不会有什么大问题。

– 比较各个操作系统的字体，我们会发现——

其实，windows 常用的字体其它操作系统都有，甚至很多人认为windows only 的 Arial 字体也不例外~

不少设计师都认为 Arial 是个不典雅的字体，所以希望在 Mac 上能用更经典的 Helvetica 字体来代替，于是产生了这种代码：

但是因为Mac OS 其实也有Arial 字体，所以永远都只会显示Arial

其实这种问题，只要稍加修改就OK了啦：

但是事情往往不是这么简单的。比如上面的Mac OS X字体表中，由个 Lucida Grande 字体。照理说这个字体是Mac only的，所以大家理应可以放心的这么写：

那么Mac用户可以看到Lucida Grande, 而PC用户可以看到Arial字体。多好的应用典范。

但是实际上呢，不少PC用户居然看到了乱码，而不是 Arial 字体

怎么回事呢？因为市面上有不少字体下载网站，而上面就有那个Lucida Grande下载。可惜这个广为流传的 Lucida Grande 是个rip版，而且rip的时候有缺陷，导致所有换行字符都会显示成一个乱码……

——囧大了

不要说这种事情只会在乱装英文字体的用户上发生哟。能在XP上显示微软雅黑的，不都是rip版的嘛——那个网上广为流传的版本，也存在着类似缺陷，只不过不至于严重到产生乱码而已。所以在选择字体时需要注意一下。

– 常用西文字体介绍

Tahoma是我本人比较喜欢的一种非衬线字体。首先几乎所有的系统都默认安装了这个字体，所以不会存在兼容性问题，其次，这个字体也比较均衡，显示段落也不错。

说老实话，Verdana太宽了，不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。国外设计师喜欢用Verdana, 很多时候是因为Verdana 11px以下的小字效果的确十分理想，但是国内很多设计师想也不想就照搬过来，并用在12px 乃至14px的布局上，导致本来就局促的空间更显紧张，所以不推荐作为font-family 打头阵的字体。

如果要使用Verdana字体的话，就一定要考虑它和一般系统default的sans-serif字体之间的大小差距。不论和Helvetica 或者Arial 比起来，Verdana都大得多了。不过好在几乎所有的系统也都会默认安装这个字体……

Trebuchet MS 是个很多人都会忽视的字体。其实我个人也比较欣赏这个字体的。与其使用Verdana, 还不如用这个线条更圆润的的字体来替代。对各种操作系统也有很好的支持。

缺点是和Verdana一样，因为过宽，而不适合用在中英文混排。也要注意和default sans-serif font 宽度差距的问题。

因为考虑到有些Linux 系统可能不会安装这个字体，所以如果要用在一个font-family的开头话，可以使用Verdana 做后续字体。

Windows 操作系统的默认sans-serif 字体。没啥好说的，永远都不会用到的默认字体。

为啥同样是默认字体，Helvetica 就这么典雅呢？  哪怕就是用在font-family的开头也是能独挡一面的啦。

另外，这里有个 Helvetica 和 Arial 打架的flash游戏~ 像超级玛利一样踩 Arial 字符就可以了。顺便没有 Helvetica 字体的人可以看一下两个字体的具体区别~ 茶~

我最喜欢用的 serif 字体。不仅很适合做正文，也适合做标题。尤其是意大利体的 Georgia Italic 更是魅力难挡。缺点仍旧是不适宜和汉字混排，因为Georgia的衬线哪怕对于宋体来说也太重了，所以看上去硬邦邦的……

Windows 的默认serif 字体。没啥好说的，西文字体的元老了。很多字体，比如大家都熟悉的Courier New都是从Times New Roman派生出来的。

不过现在印刷业都很少用这个字体了，更多的是在用它的后代——Times Europa 和 Times Europa Office。

在具体的网页字体应用上，要注意同样字号的Times New Roman比普通字体小的多，所以一定要考虑进字体大小的变化

常用的等宽字体之一。其实等宽字体的选择比较小啦，所以基本上要兼容所有系统，也就只能选这个字体了。

不过还好，等宽字体通常都是在写代码的时候有用，所以只要等宽就没什么大问题。类似于 Lucida Sans Typewriter, Lucida Console, Monaco 之类的字体也都很好用。

– 综上所述，总结几套实用而简单的font-family

Tahoma 系的中性字体。推荐使用在13px以上的环境。

Verdana 系的宽扁字体。推荐在11px以下环境使用。

衬线字体的不二之选。

一系列等宽字体。写代码很好用。另外，如果觉得Lucida Console太宽的话，可以换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~

– 你知道吗？

• 字体的别名系统中的一个字体是允许有多种别名形式存在的。比如，在windows 下，Georgia 也可以用 Georgia MS 来命名，它们其实是同一种字体。宋体的正式名称是SimSon，而“宋体”只是它的别名。按照规范，浏览器应该能自动识别字体的别名，并映射到正确的字体文件。比如，font-famliy: SimSon 和 font-family: “宋体” 应该具有等价的效果。可惜，似乎很多浏览器都不能正确执行前一条定义……
• 什么时候在字体名称前面加引号大家来看这个字体样式定义：

  1	font-family: Times New Roman, 宋体, serif;

  很多人都会说，这个样式写法是错的，因为 Times New Roman 和宋体都应该用引号括起来，像下面这样：

  1	font-family: "Times New Roman", "宋体", serif;

  实际上呢，上面两种写法都是对的。和很多人想象中的不一样，字体名称外面的引号其实并非必须的。那么加引号和不加引号有什么区别呢？

  其实最大的不同在于对字体名称中空白字符（如空格、制表符）的解释。

  不加引号的时候，浏览器对于字体名称中空白字符的解释应该和XML中一样，即忽略字体名称左右的空白字符，并且单词中间的空白字符被解释为一个空格。比如 font-family:         Times       New  Roman                , serif; 会被解释成 font-family: Times New Roman, serif;

  加引号的时候，浏览器必须保留引号内所有的空白字符。如果写成 font-family: “Times       New Roman”; 那么浏览器不会显示 Times New Roman 字体，而是搜索一个叫做“Times       New Roman”的字体。

  至于“宋体”这样的字体名称，因为中间没有空白字符，因此完全没有必要加引号。但是考虑到并非左右的操作系统都有汉字支持，并且并非所有的程序员都会注意css文件的正确编码问题，所有保险起见，一般会加上引号。当然，解决这种问题的最好方法是使用别名。比如宋体，其实应该写成SimSon，这样哪怕浏览者的系统不支持中文，并且这个css文件被错误的编码成了GB2132也没问题，浏览器还是知道这是宋体，并且做出正确的字体搜索。可惜，不是所有浏览器都支持就是了……

网页设计中的字体应用这个专题就讲到这里了，希望对大家有所帮助。下次我打算讲一下在项目中如何应用样式表管理，适合稍微有些样式表基础，并且正在参与、或者有意参与大型开发项目的朋友们听哦~ 其中还可能穿插一些小文章，解释一些实际工作中大家遇到的容易误解的地方。不过最近偶会比较忙一些，所以可能会花些时间来写，请大家耐心等待啦。

那么，大家下次见了哟~