px
像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
特点：
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
pt
是一个物理长度单位，指的是72分之一英寸。9pt=12px，可以依次换算。
em
相对长度单位，相对于当前对象内文本的字体尺寸。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1em=16px。
特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
<div style="font-size:20px;"> <p style="font-size:1em;">这里1em=20px</p> <p style="font-size:2em;">这里2em=40px</p> </div>
上面的例子就说明了em的值并非固定的，他是根据父元素的字体大小来决定的。如果父元素设置了font-size:20px，那么1em=20px，2em=40px；如果父元素设置了font-size:30px，那么1em=30px，2em=60px。依次类推。
rem
是CSS3新增的一个相对单位，可以理解为"root em"，相对于根节点html的字体大小来计算的，chrome/firefox/IE9+支持。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1rem=16px。
<html style="font-size:100px;"> <head> <title></title> </head> <body> <p style="font-size:1rem;">这里1rem=100px</p> <div style="font-size:50px;"> <p style="font-size:2rem;">这里2rem=200px</p> </div> </body> </html>
上面的例子说明了，rem的值只受到根节点html的字体大小影响，并不受父元素字体大小的影响。如果根节点html设置了font-size:100px，那么1rem=100px，2rem=200px；如果根节点html设置了font-size:200px，那么1rem=200px，2rem=400px。依次类推。
rem和em在为元素设置字体大小时，都是相对大小。区别在于：使用rem时，相对的只是HTML根元素。
rem这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
注意：
谷歌浏览器chrome强制最小字体为12px，因此即使设置了小于12px的值，也会显示成12px。因此，当你给html设置font-size:10px时，1rem并不是等于10px，而是等于12px
具体使用哪种字体单位，还是要根据项目实际情况来定的。rem更加适合不用考虑低版本浏览器兼容问题的项目来使用。