我应该使用pt还是px？

Question

CSS中pt和px之间有什么区别？我应该使用哪一个？为什么？

Answer 1

这里你有一个非常详细的解释他们的差异

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

它的主旨（来自消息来源）

像素是在屏幕媒体中使用的固定大小的单位（即，要在计算机屏幕上阅读）。 Pixel代表“图片元素”，如您所知，一个像素是屏幕上的一个小“方形”。 点传统上用于印刷媒体（任何要在纸上印刷的东西等）。一点等于1/72英寸。点很像像素，因为它们是固定大小的单位，不能缩放。

Answer 2

px≠像素

所有这些答案似乎都是错误的。与直觉相反，在CSS中px 不是像素。至少，不是简单的物理意义。

阅读W3C，EM, PX, PT, CM, IN…中的这篇文章，了解px如何成为一个神奇的＆＃34;为CSS发明的单位。 px的含义因硬件和分辨率而异。 （那篇文章很新，最新更新时间为2014-10。）

我自己的思考方式：1 px is the size of a thin line intended by a designer to be barely visible.

引用that article：

  

px单元是CSS的神奇单元。它与当前字体无关，也与绝对单位无关。 px单元被定义为小但可见，并且可以显示具有锐边的水平1px宽线（无抗锯齿）。什么是锋利的，小的和可见的取决于设备和它的使用方式：你把它靠近你的眼睛，如手机，手臂长度，如电脑显示器，或介于两者之间，如书？因此，px不是定义为恒定长度，而是取决于器件类型及其典型用途。

     

为了了解px的外观，想象一下20世纪90年代的CRT计算机显示器：它可以显示的最小点大小为1/100英寸（0.25毫米）或更多。 px单元的名称来自那些屏幕像素。

     

现在有些设备原则上可以显示较小的尖点（尽管您可能需要放大镜才能看到它们）。但是，无论设备是什么，上个世纪在CSS中使用px的文档看起来都是一样的。特别是打印机可以显示比1px小得多的细节线条，但即使在打印机上，1px线条看起来与计算机显示器上看起来非常相似。设备会发生变化，但px始终具有相同的视觉效果。

该文章提供了有关使用pt vs px vs em来回答此问题的一些指导。

Answer 3

看一下CSS-Tricks的这篇优秀文章：

• px – em – % – pt – keyword

摘自文章：

---

PT

可以声明字体大小的最终测量单位是点值（pt）。 点值仅适用于打印CSS！点是用于实际纸上墨水排版的度量单位。 72pts =一英寸。一英寸=一个真实的英寸像一个统治者。屏幕上没有一英寸，根据分辨率完全是任意的。

就像在字体大小调整的显示器上像素的准确度非常准确一样，点大小在纸上是不准确的。要在打印页面时获得最佳的跨浏览器和跨平台结果，请设置打印样式表并使用磅值调整所有字体的大小。

为了更好的衡量，我们不使用点大小进行屏幕显示（除了它是荒谬的）的原因是跨浏览器结果完全不同：

PX

如果你需要细粒度控制，在像素值（px）中调整字体大小是一个很好的选择（这是我最喜欢的）。在计算机屏幕上，它不会比单个像素更精确。通过以像素为单位调整字体大小，您实际上是在告诉浏览器将字母精确地渲染为高度的像素数：

Windows，Mac，别名，消除锯齿，跨浏览器无关紧要，设置为14px的字体高度为14px。但这并不是说不会有一些变化。在下面的快速测试中，结果比关键字略微更一致，但不完全相同：

由于像素值的性质，它们不会级联。如果父元素的像素大小为18像素且子元素为16像素，则子元素为16像素。但是，可以组合使用字体大小设置。例如，如果父级设置为16px且子级设置为较大，则子级确实会比父级大。快速测试向我展示了这一点：

“更大”将母公司的16px提升至20px，增长25％。

对于可访问性和可用性问题，像素在过去得到了糟糕的包装。在IE 6及更低版本中，用户无法调整以像素设置的字体大小。这意味着我们时尚年轻健康的设计师可以设置12px的类型，并在屏幕上阅读它就好了，但是当人们在牙齿上稍微长一点时，要增大尺寸以便他们可以阅读，他们无法做到。这实际上是IE 6的错，不是我们的错，但我们得到了我们的东西，我们必须处理它。

设置字体大小（以像素为单位）是最准确的（我发现最令人满意的）方法，但请考虑到仍在您网站上使用IE 6的访问者数量及其可访问性需求。我们正处于不再需要关心的前沿。

---

Answer 4

pt是1/72英寸，对于无法正确计算DPI的设备上呈现的任何内容都是无用的度量。这使其成为印刷的合理选择，也是在屏幕上使用的可怕选择。

px是一个像素，在大多数情况下会映射到屏幕像素。

CSS提供了许多其他单位，您应该选择哪一个取决于您设置的大小。

如果您需要调整尺寸以匹配图像，或者您需要细边框，则像素非常棒。

百分比对于字体大小很有用，因为如果你一直使用它们，你会得到与用户偏好成比例的字体大小。

当您希望元素根据字体大小调整自身大小时，Ems非常棒（如果字体大小较大，则段落可能会变宽）

......等等。

Answer 5

pt是“点”的推导（缩写），历史上用于印刷型面，其中尺寸通常在“点”中“测量”，其中1点具有1/72英寸的近似测量值，并且因此72磅的字体大小为1英寸。

px是“像素”的缩写，它是屏幕或点阵式打印机或其他以点式方式呈现的打印机或设备上的简单“点” - 与具有固定大小的旧打字机相反，坚固的前锋，通过按下功能区留下角色的印记，从而留下固定大小的图像。

与点密切相关的是术语“大写”和“小写”，这在历史上与选择固定印刷字符有关，其中“captital”字符放在非捕获字符上方的盒子（盒子）中它们放在下面的一个盒子里，因而是“较低”的情况。

对于不同的印刷字体和大小，有不同的盒子（盒子），但是每个盒子都有“上”和“下”的情况。

另一个术语是“异食癖”，它是字体中一个字符的度量，因此异食癖是1/6英寸或12个测量单位（12/72）。

严格地说，测量是在4.233mm或0.166in的计算机上，而旧点（美国）是1 / 72.27英寸而法语是4.512mm（0.177in。）。因此，我对测量的“近似”陈述。

此外，办公室使用的打字机有“Elite”或“Pica”尺寸，其尺寸分别为10英寸和12英寸/英寸。

此外，标准化之前的“点”是基于金属印刷师的“脚”尺寸，一个角色的基本印迹尺寸，并且尺寸有所不同。

请注意，印刷的“脚”最初来自已故打印机的实际尺寸。印刷脚包含72皮卡或864点。

至于CSS使用，我更喜欢使用EM而不是px或pt，从而获得缩放的优势而不会丢失相对位置和大小。

编辑：为了完整起见，您可以将EM（em）视为一个字体高度的度量元素，因此12pt字体的1em将是该字体的高度，而2em将是该高度的两倍。请注意，对于12px字体，2em是24像素。 SO 10px通常为标准字体的0.63em，因为“大多数”浏览器基于16px = 1em作为标准字体大小。