字体大小pt、px、em、rem的区别

这里向大家描述一下CSS中 px 和 em 的特点和区别，px 像素（Pixel），相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的，而 em 是相对长度单位，相对于当前对象内文本的字体尺寸，相信本文介绍一定会让你有所收获。

详解 px 和 em 的特点和区别

象素 px 是我们在定义 CSS 中经常用到的尺寸大小单位，而 em 在国外网站中经常被使用，px 和 em 之间究竟有什么区别和特点呢？

px 像素（Pixel），相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
因此用 px 来定义字体，就无法用浏览器字体放大的功能。
任意浏览器的默认字体高都是 16px。所有未经调整的浏览器都符合:1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 Font-size=62.5%，这就使 em 值变为 16px*62.5%=10px,这样 12px=1.2em,10px=1em,也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。

CSS 中 em 属性有如下特点

em 的值并不是固定的；
em 会继承父级元素的字体大小。

所以我们在写 CSS 的时候，需要注意

body 选择器中声明 Font-size=62.5%；
将你的原来的 px 数值除以 10，然后换上 em 作为单位；
重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。
也就是避免 1.2*1.2=1.44 的现象。
比如说你在#content 中声明了字体大小为 1.2em，那么在声明 p 的字体大小时就只能是 1em，而不是 1.2em,因为此 em 非彼 em，它因继承#content 的字体高而变为了 1em=12px。
但是 12px 汉字例外，就是由以上方法得到的 12px(1.2em)大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小，而是稍大一点。这个问题 Jorux 已经解决，只需在 body 选择器中把 62.5%换成 63%就能正常显示了。原因可能是 IE 处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

rem

em 是相对长度单位，相对于当前对象内文本的字体尺寸，即 em 的计算是基于父级元素 font-size 的。比如：

<body style="font-size:14px">
  <p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>
  <div style="font-size:18px">
    <p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
  </div>
</body>

rem 是 css3 新增的一个相对单位，与 em 的区别在于，它是相对于 html 根元素的(在 body 标签里面设置字体大小不起作用)。还是上面那个例子，如果换做 rem，结果如下：

<body style="font-size:14px">
  <p style="font-size:2rem">
    我这里的字体显示大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的
  </p>
  <div style="font-size:18px">
    <p style="font-size:2rem">
      我这里显示字体大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的
    </p>
  </div>
</body>

** 补充默认font-size大小是16px(如果html中没有设置的话)。**