CSS字体与行高的预置总结
- 十一月 29th, 2009
所有参考文章：
这些文章给了我很大的启发。CSS其实本身就是一种细节处理的技术，无论是多么微小的细节，都会影响到页面的整体效果、性能和工作效率。比如字体的选择和行高的设置这样的问题，就曾在工作中给我带来很多的困惑和麻烦。
根据以上的文章归纳出的几种实用的font设置：
1、淘宝的默认字体样式（最值得借鉴的一种）
body { font: 12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; }
或：
body { font: 12px/1 Helvetica, Tahoma, Arial, "\5b8b\4f53", sans-serif; }
p { line-height: 1.5; }
============注解============
* 其中”\5b8b\4f53″是”宋体”的unicode表示，不用”宋体”的正式名”SimSun”, 是据说FF的某些版本和Op不支持”SimSun”的写法。使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}。
* 对于较复杂的页面来说，行高1.5 会导致 li, hx, div 等所有元素的默认行高都是1.5, 这会给实际工作带来不少重置工作量和某些诡异bug（切身惨痛经历！！！）所以射雕推荐的是第二种写法。
* 设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
* 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
2、Tahoma 系的中性字体。推荐使用在13px以上的环境。
font-family: Tahoma, Helvetica, Arial, sans-serif;
3、Verdana 系的宽扁字体。推荐在11px以下环境使用。
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
4、衬线字体的不二之选。
font-family: Geogia, Times New Roman, Times, serif;
5、一系列等宽字体。写代码很好用。另外，如果觉得Lucida Console太宽的话，可以换成比较窄的Lucida Sans Typewriter。
font-family: Lucida Console, Monaco, Courier New, mono, monospace;
