总是有人问我 px、pt 和 em 之间的区别，有时我担心该使用哪个单位。 今天早上我查了一些文章。 下面的文章其实是很久以前的文章了，但是解释的比较全面。 转载为合集。点击查看原文
这里引用的文章是Jorux的《95%的中国网站需要重绘CSS》，标题有点吓人，确实是国外网页制作的一些缺陷。 我还是搞不清楚px和em之间的关系和特点。 读完之后css3 字体大小，我确实收获很多。 字体通常以px为单位定义，因此很难使用浏览器字体放大功能，而美国大部分网站在IE下都可以使用。 因为：
1、IE很难调整这些以px为单位的字体的字体大小；
2、美国大部分网站之所以可以调整，是因为他们使用em作为字体单位；
3、只有Firefox可以调整px和em，但96%以上的中国网民使用IE浏览器（或内核）。
代码如下所示
复制代码
px 像素（Pixel）是一个相对厚度单位，像素px是相对于显示屏的帧率而言的。 （引自CSS2.0指南）
代码如下所示
复制代码
em 是相对粗细单位，相对于当前对象内文本的字体大小。 如果没有手动设置内嵌文本的当前字体大小，则它是相对于浏览器的默认字体大小。 （引自CSS2.0指南）
字体单元使用em来支持IE6下的字体缩放。 在页面按ctrl+滚轮，字体单位为px的网站没有反应。
px是绝对单位，不支持IE缩放。
em是相对单位，网页中的文字可以放大和缩小。 使用 em 作为行高和水平高度。 确保缩放时的完整性。
任何浏览器的默认字体高度都是 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作为单位即可。
em具有以下特点：
1、em的值不固定；
2.em会延续父元素的字体大小。
所以我们在写CSS的时候需要注意：
1.在body选择器中声明Font-size=62.5%； （字体大小=63%；用于 ie6 兼容性）
2、将你原来的px值乘以10，然后换成em作为单位；
3.重新评估这些放大字体的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已经解决了这个问题。 只需要在正文选择器中将62.5%改为63%即可正常显示。 原因可能是IE处理汉字时，浮点值的精度有限。 不知道还有没有其他解释。
单位说明 pt
在彩色印刷排版中，点是一个绝对值，等于1/72英寸，可以用卷尺测量，化学英寸。 和css中pt的含义不太一样。 由于我们的显示被划分为各个像素，单个像素只能有一种颜色（为了简单起见，这里不讨论子像素抗锯齿技术），要将其显示在屏幕上，我们首先要在 pt 中设置颜色作为单位转换的宽度被转换为以像素为单位的宽度。 这个转换的媒介就是DPI（其实这里所谓的DPI是操作系统和浏览器中使用的术语，即PPI、pixelsperinch和扫描仪，打印机和数码单反中的DPI是不同的概念）。
例如，无论什么操作系统css3 字体大小，火狐浏览器的默认DPI都是96，所以实际上9pt=9*1/72*96=12px。
因此，虽然“DPI”中的“I”和“1pt等于1/72inch”中的“英寸”并不代表化学英寸，但这两个单位彼此相等，并被取消了任命。
那么，如何估计真实的化学宽度呢？ 请拿出一把尺子，测量显示器的可见长度（此处为 11.2992 英寸），将其乘以垂直比特率（此处为 1024 像素），结果就是每像素的化学宽度。
现在我们可以回答这个问题了，9pt字体在网页上占用多少空间？ 答案是：9*1/72*96*11.2992/1024=0.1324英寸=0.3363分米。
虽然 pt 是一个绝对单位，并且仅适用于输出设备，但它在文本排版工具（word、abobe）中是非常有用的字体单位。 无论显示器的帧速率如何，在纸张上复印的结果都是相同的。
但网页主要是为了屏幕显示，而不是用于复制等其他需求。 只有px才能准确的表示元素在屏幕上的位置和大小。
实际上。 在dpi为96的情况下，9pt=12px。
附px、em、%和pt换算表
px、em、% 和 pt 转换
发表评论