如何在CSS里设置文本的尺寸
但从标题上来说，也许会有人认为这太简单。但是，这个简单与不简单是有条件的，如果你开发的Web应用程序只给固定的一些少数人用，而这些人又碰巧只使用一种浏览器，那么设置网页的文本尺寸就是个简单问题。但是如果你开发的项目要给成千上万人使用，你不知道他们使用什么浏览器，不知道他们用的是什么系统，而你又非常关心你的网站的用户体验，那么这就是复杂的问题。
网页的设计标准是统一的，但是由于现实中存在IE，Firefox，Opera，Safari等等许多浏览器，而且他们对同一标准支持又不尽相同。所以制作页面的时候，就不得不考虑它们。其中IE6对标准的支持是最差的，在制作网页的时候经常要对IE6做特殊照顾。在CSS里设置文本的时候也不例外。
固定的字体大小和高度固然是良好设计的前提，但是网页又有其特殊性，用户和设计一样，可以随意更改页面的样式。比如，你的网页显示给视力不好的人看的时候，他们就可以通过浏览器改变你原来设置的字体大小来使文字看起来更舒服。所以制作的网页的时候也需要考虑这个。
以我个人做过的项目来看，很多网站都使用PX来设置文本大小，这个对于IE以外的浏览器来说没有问题，你设置的字体都可被放大和缩小。但是在IE却不行。所以，不需找到一个更通用的方法来设置字体大小。
W3C的标准推荐使用em。什么是em呢。在最开始，它表示英文字母的水平长度。但是后来由于其他自然语言的水平长度和英文字母并不相同，比如中文。用em表示水平长度就造成混乱，但是，字符都是由高度的，并且任何语言高度都是统一的，所以现在em是表示一个字符的垂直高度。
浏览器里默认的1em高度都是16个px。所以要使你的网页跨浏览器支持字体缩放，可以通过下面的方法把CSS中的px转换成em。
1.首先在body里设置font-size为62.5%，即：font-size： 62.5%;
因为1em = 16px，那么10px就应该是0.625em。所以把font-size缩小0.625倍，在换算器来就方便了。
另外最好把line-height也固定下来，即： line-height： 1.2em;
2.在CSS里原有的px除以10，单位改成em就可以了。默认字体就应该与转换之前一样。但是需要注意的是em的尺寸是有继承关系的。比如下面的代码：
<div>Parents<ul>Children</ul></div>
如果设置div为1.2em，并且又设置了ul为1.2em，结果ul的字体大小不是1.2em，而是1.2 * 1.2 = 1.44em了。一定要注意。这样有个好处就是是你被迫的去删除多余的css字体大小设置。在编写CSS的时候不自觉的精简代码。
参考文章：How to size text using ems
