谈谈网页设计中的字体应用 (4) 实战应用篇·下（4）

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

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

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

那么，大家下次见了哟~