利用em和百分比来控制字体大小

记得上大学的时候，那时教我们网页设计的四眼老师告诉我们，如果用了CSS来控制字体大小，那么在IE下查看字体大小是对网页里的文字是无效的，而当时考试的一项标准就是考你有没有用CSS，而衡量这一标准就是在IE浏览器里打开你做的页面，然后查看字体大小，页面字体大小没有变化的就有加分，有变化的就减分，很幸运，我当时做的页面没有加分也没有减分，因为已经是100分 ^_^

后来在大二出来外面打工时，才发觉在学校里学的东西都是20世纪流行的东西，21世纪的技术一点都没学上，如果一个页面在IE环境下不能控制页面里的字体大小，那么这个页面可以算是不合格的了，很赞赏彪叔的一句话：完美的网页应该是适应不同人群的

OK~说了那么多的废话，该回归主题了，现在很多网站都是在用px或者pt来做为字体的大小单位，这样做在IE下是无法让用户更改字体大小的，而FF和Opera等标准浏览器是可以的，怎样让IE环境下能让用户更改字体大小呢？使用em做为字体大小的单位～

要使用em做单位，首先得了解一下什么是px和em，

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

所有浏览器默认的字体大小是16px，把16px看成是1em，也就是16px=1em，那么12px=0.75em, 10px=0.625em，以此类推，这样子就可以实现在IE下用户可更改字体大小。

Demo: http://blog.ikshow.cn/demo/font_size/index.html

有人写body的font-size是写成75%，这个跟0.75em是一样的！

如果页面的其他地方的字体大小是0.75em怎么办呢？很简单，把body的字体大小设置为0.75em，然后整个页面的其他字体大小以这个0.75em为基准利用百分比来变化大小就可以了！怎样？是不是很容易，应该明白了吧？不明白？没关系，有例子看～

Demo: http://blog.ikshow.cn/demo/font_size/index_2.html

可以看到，P标签里的字体大小是120%；也就是body字体大小0.75em的120%。

怎样，现在是不是已经看懂了？但是使用em还得注意一个问题，就是em会继承父级元素的字体大小，什么意思呢？看例子：

Demo:  http://blog.ikshow.cn/demo/font_size/index_3.html

可以看到，inner层里的P标签的字体大小85%并不是根据body的字体大小0.75em来设置的，而是根据父层的字体大小120％来设置的，把父层的字体大小120％看成100%，再根据这个100%来设置相应的比率。所以在做页面时如果使用em或者百分比做字体大小单位时还得注意这一点～