CSS 我应该使用pt还是px？

Should I use pt or px?

提问by esqew

What is the difference between ptand pxin CSS? Which one should I use and why?

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

采纳答案by Basil Bourque

px≠ Pixels

px≠ 像素

All of these answers seem to be incorrect. Contrary to intuition, in CSS the pxis not pixels. At least, not in the simple physical sense.

所有这些答案似乎都不正确。与直觉相反，在 CSSpx中不是像素。至少，不是在简单的物理意义上。

Read this article from the W3C, EM, PX, PT, CM, IN…, about how pxis a "magical" unit invented for CSS. The meaning of pxvaries by hardware and resolution. (That article is fresh, last updated 2014-10.)

阅读来自W3C、EM、PX、PT、CM、IN... 的这篇文章，了解如何px为 CSS 发明一个“神奇”的单位。的含义px因硬件和分辨率而异。（那篇文章是新鲜的，最后更新于 2014-10 年。）

My own way of thinking about it: 1 px is the size of a thin line intended by a designer to be barely visible.

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

To quote that article:

引用那篇文章：

The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device. Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.

px 单位是 CSS 的魔法单位。它与当前字体无关，也与绝对单位无关。px 单位被定义为小但可见的，这样可以显示具有锐利边缘的水平 1px 宽线（无抗锯齿）。什么是锐利、小和可见的取决于设备及其使用方式：您是将它靠近眼睛（如手机）、手臂长度、计算机显示器，还是介于两者之间的某个位置（如书）？因此，px 不是定义为恒定长度，而是取决于设备类型及其典型用途。

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

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

That article gives some guidance about using ptvs pxvs em, to answer this Question.

那篇文章给出了一些关于使用ptvs pxvs 的指导em，来回答这个问题。

回答by Flakron Bytyqi

Here you've got a very detailed explanation of their differences

在这里，您对它们的差异有非常详细的解释

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

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

The jist of it (from source)

它的要点（来自来源）

Pixelsare fixed-size units that are used in screen media (i.e. to be read on the computer screen). Pixel stands for "picture element" and as you know, one pixel is one little "square" on your screen. Pointsare traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

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

回答by Sarfraz

Have a look at this excellent article at CSS-Tricks:

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

• px – em – % – pt – keyword

• px – em – % – pt – 关键字

Taken from the article:

摘自文章：

---

---

pt

点

The final unit of measurement that it is possible to declare font sizes in is point values (pt). Point values are only for print CSS!A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. One inch = one real-life inch like-on-a-ruler. Not an inch on a screen, which is totally arbitrary based on resolution.

可以声明字体大小的最终测量单位是磅值 (pt)。点值仅用于打印 CSS！点是用于现实生活中的纸本印刷排版的测量单位。72pts = 一英寸。一英寸 = 现实生活中的一英寸，就像尺子上的一样。屏幕上没有一英寸，这完全是基于分辨率的任意决定。

Just like how pixels are dead-accurate on monitors for font-sizing, point sizes are dead-accurate on paper. For the best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts with point sizes.

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

For good measure, the reason we don't use point sizes for screen display (other than it being absurd), is that the cross-browser results are drastically different:

作为一个很好的衡量标准，我们不使用点大小进行屏幕显示的原因（除了荒谬）是跨浏览器的结果截然不同：

px

像素

If you need fine-grained control, sizing fonts in pixel values (px) is an excellent choice (it's my favorite). On a computer screen, it doesn't get any more accurate than a single pixel. With sizing fonts in pixels, you are literally telling browsers to render the letters exactly that number of pixels in height:

如果您需要细粒度的控制，以像素值 (px) 为单位调整字体大小是一个很好的选择（这是我的最爱）。在计算机屏幕上，没有比单个像素更准确的了。通过以像素为单位调整字体大小，您实际上是在告诉浏览器在高度上准确地呈现字母数量的像素：

Windows, Mac, aliased, anti-aliased, cross-browsers, doesn't matter, a font set at 14px will be 14px tall. But that isn't to say there won't still be some variation. In a quick test below, the results were slightly more consistent than with keywords but not identical:

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

Due to the nature of pixel values, they do not cascade. If a parent element has an 18px pixel size and the child is 16px, the child will be 16px. However, font-sizing settings can be using in combination. For example, if the parent was set to 16px and the child was set to larger, the child would indeed come out larger than the parent. A quick test showed me this:

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

"Larger" bumped the 16px of the parent into 20px, a 25% increase.

“更大”将父级的 16 像素变成了 20 像素，增加了 25%。

Pixels have gotten a bad wrap in the past for accessibility and usability concerns. In IE 6 and below, font-sizes set in pixels cannot be resized by the user. That means that us hip young healthy designers can set type in 12px and read it on the screen just fine, but when folks a little longer in the tooth go to bump up the size so they can read it, they are unable to. This is really IE 6's fault, not ours, but we gots what we gots and we have to deal with it.

过去，像素在可访问性和可用性方面的表现不佳。在 IE 6 及更低版本中，用户无法调整以像素为单位设置的字体大小。这意味着我们时髦的年轻健康设计师可以将字体设置为 12px 并在屏幕上阅读它就好了，但是当人们在牙齿上稍长一点的时候去增大尺寸以便他们可以阅读时，他们就无法阅读。这确实是 IE 6 的错，不是我们的错，但我们得到了我们得到的，我们必须处理它。

Setting font-size in pixels is the most accurate (and I find the most satisfying) method, but do take into consideration the number of visitors still using IE 6 on your site and their accessibility needs. We are right on the bleeding edge of not needing to care about this anymore.

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

---

---

回答by Quentin

A pt is 1/72th of an inch and is a useless measure for anything that is rendered on a device which doesn't calculate the DPI correctly. This makes it a reasonable choice for printing and a dreadful choice for use on screen.

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

A px is a pixel, which will map on to a screen pixel in most cases.

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

CSS provides a bunch of other units, and which one you should choose depends on what you are setting the size of.

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

A pixel is great if you need to size something to match an image, or if you want a thin border.

如果您需要调整大小以匹配图像，或者如果您想要细边框，则像素非常有用。

Percentages are great for font sizes as, if you use them consistently, you get font sizes proportional to the user's preference.

百分比非常适合字体大小，因为如果您始终如一地使用它们，您将获得与用户偏好成正比的字体大小。

Ems are great when you want an element to size itself based on the font size (so a paragraph might get wider if the font size is larger)

当您希望元素根据字体大小自行调整大小时，em 非常有用（因此，如果字体大小较大，则段落可能会变宽）

… and so on.

… 等等。

回答by Mark Schultheiss

pt is a derivation (abbreviation) of "point" which historically was used in print type faces where the size was commonly "measured" in "points" where 1 point has an approximate measurement of 1/72 of an inch, and thus a 72 point font would be 1 inch in size.

pt 是“point”的派生（缩写），历史上用于印刷字体，其中尺寸通常以“点”“测量”，其中 1 点的近似尺寸为 1/72 英寸，因此为 72点字体的大小为 1 英寸。

px is an abbreviation for "pixel" which is a simple "dot" on either a screen or a dot matrix printer or other printer or device which renders in a dot fashion - as opposed to old typewriters which had a fixed size, solid striker which left an imprint of the character by pressing on a ribbon, thus leaving an image of a fixed size.

px 是“pixel”的缩写，它是屏幕或点阵打印机或其他打印机或设备上的简单“点”，以点方式呈现 - 与具有固定尺寸的旧打字机相反，实心前锋通过按压色带留下字符的印记，从而留下固定大小的图像。

Closely related to point are the terms "uppercase" and "lowercase" which historically had to do with the selection of the fixed typographical characters where the "captital" characters where placed in a box (case) above the non-captitalized characters which were place in a box below, and thus the "lower" case.

与这一点密切相关的是术语“大写”和“小写”，它们在历史上与固定印刷字符的选择有关，其中“大写”字符放置在位于非大写字符上方的框（大小写）中在下面的框中，因此是“小写”。

There were different boxes (cases) for different typographical fonts and sizes, but still and "upper" and "lower" case for each of those.

不同的印刷字体和大小有不同的框（大小写），但每个框仍然是“大写”和“小写”。

Another term is the "pica" which is a measure of one character in the font, thus a pica is 1/6 of an inch or 12 point units of measure (12/72) of measure.

另一个术语是“pica”，它是字体中一个字符的度量，因此 pica 是 1/6 英寸或 12 磅度量单位 (12/72)。

Strickly speaking the measurement is on computers 4.233mm or 0.166in whereas the old point (American) is 1/72.27 of an inch and French is 4.512mm (0.177in.). Thus my statement of "approximate" regarding the measurements.

严格地说，计算机上的测量值是 4.233 毫米或 0.166 英寸，而旧点（美国）是 1/72.27 英寸，法国是 4.512 毫米（0.177 英寸）。因此，我关于测量的“近似”声明。

Further, typewriters as used in offices, had either and "Elite" or a "Pica" size where the size was 10 and 12 characters per inch repectivly.

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

Additionally, the "point", prior to standardization was based on the metal typographers "foot" size, the size of the basic footprint of one character, and varied somewhat in size.

此外，标准化之前的“点”是基于金属印刷师的“脚”大小，一个字符的基本足迹的大小，并且大小有所不同。

Note that a typographical "foot" was originally from a deceased printers actual foot. A typographic foot contains 72 picas or 864 points.

请注意，印刷“脚”最初来自已故打印机的实际脚。一个印刷脚包含 72 picas 或 864 点。

As to CSS use, I prefer to use EM rather than px or pt, thus gaining the advantage of scaling without loss of relative location and size.

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

EDIT: Just for completeness you can think of EM (em) as an element of measure of one font height, thus 1em for a 12pt font would be the height of that font and 2em would be twice that height. Note that for a 12px font, 2em is 24 pixels. SO 10px is typically 0.63em of a standard font as "most" browsers base on 16px = 1em as a standard font size.

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