css字体

一.首先介绍一下px

px就是css中最基本的长度单位了，用px作单位基本上没什么问题，能够作到让页面按套路精确的展示！

可可是！但但是！若是全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，所以有砖家倡导使用em替代px。。。。。

二.接下来介绍一下em

若是你从上到下阅读此文，你应该已经知道了em出现的缘由，下面说说em的特性，简单的讲px是绝对单位，1px就是1px，2px就是2px，以此类推，而em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px，若是你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em，若是想要15px，那么就是15/16=0.938em, 例如margin:0.938em; 依次类推，样式表都用em来写的话，就能够解决ctrl+，ctrl-时

这时候有人和我同样就会抱怨了，个人数学是体育老师教的，除以16我怎么可能算明白，那好办你能够在根节点上重定义基准字号 html {font-size:62.5%} ，此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px，那么此时14px = 1.4em，15px=1.5em，依次类推，就算你数学是要饭的教的应该也会算了吧-。-！

可可是！但但是！问题又来了，em准确的说是相对于父节点的字号来计算的，若是自身定义了字号那么就相对自身字号来计算，举例以下：

html { font-size: 100%; }.box-0 {    height: 1em; /* 此时height等于16px */}.box-1 {     font-size: 0.625em; /* 此时基准字号以变动为16*0.625=10px */     height: 1em; /* 此时实际height等于10px */}

看明白了吧，在整个页面内1em并非一个固定不变的值，1em不停的变换，再加上数学是体育老师教的，这不是自做孽吗。。。不要紧，css3为咱们引入一个新的单位就是rem能够解决这个问题

三.最后介绍一下主角rem

rem和em同样也是一个相对单位，为了方便理解，咱们就理解rem为root em，顾名思义rem只相对跟节点计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你能够设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。

声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！那么咱们就在ie678中用px作兼容处理，例如：

.box {    font-size: 14px; /* 用来兼容ie678 */    font-size: 0.875em; }

 0101后花园使用的WordPress 3.5.1所引用的style.css正是使用的这种方式。

因为做者的语文也是体育老师教的，因此有言语不通之处敬请见谅，还请指正！3Q！

形成的页面错乱问题,经常使用em