[教程] 谈谈网页设计中的字体应用 (4) 实战应用篇·下

font-family: Arial, Helvetica, sans-serif;
但是因为Mac OS 其实也有Arial 字体，所以永远都只会显示Arial font-family: Helvetica, Arial, sans-serif;

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

font-family: "Lucida Grande", Arial, sans-serif;

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

但是实际上呢，不少PC用户居然看到了乱码，而不是 Arial 字体 font-family: Tahoma, Helvetica, Arial, sans-serif;
Tahoma 系的中性字体。推荐使用在13px以上的环境。

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

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

font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

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

- 你知道吗？

字体的别名
系统中的一个字体是允许有多种别名形式存在的。比如，在windows 下，Georgia 也可以用 Georgia MS 来命名，它们其实是同一种字体。宋体的正式名称是SimSon，而“宋体”只是它的别名。

按照规范，浏览器应该能自动识别字体的别名，并映射到正确的字体文件。比如，font-famliy: SimSon 和 font-family: "宋体" 应该具有等价的效果。可惜，似乎很多浏览器都不能正确执行前一条定义……

什么时候在字体名称前面加引号
大家来看这个字体样式定义：

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

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

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也没问题，浏览器还是知道这是宋体，并且做出正确的字体搜索。可惜，不是所有浏览器都支持就是了……

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

那么，大家下次见了哟~