PT转PX转换器

PT转PX转换器 可在屏幕和印刷场景中将点转换为像素，也可将像素转换回点。大多数转换器只根据固定的 CSS 比率 1pt = 1.3333px 给出一个数字。这个答案在浏览器中是正确的，但在其他大多数场景中都不正确，因为点是物理单位，其中包含多少像素取决于输出分辨率。本工具会同时给出两种结果：浏览器实际渲染的 CSS 值，以及在 72、150、300、600 或任意自定义 DPI 下的设备像素值；还会在真实刻度尺上显示毫米和英寸的实际物理尺寸。

pt 转 px 公式

一个点的定义正好是英寸的七十二分之一。一英寸包含多少像素，取决于输出分辨率。把这两个事实放在一起，就能得到转换公式：

在网页中，分辨率不是变量。CSS 规范将 1in = 96px 作为定义固定下来，因此浏览器始终使用 96，公式也就简化为一个常数：

这就是为什么无论设备是 1× 笔记本电脑面板还是 3× 手机屏幕，在每个浏览器中 12pt 都是 16px。CSS 像素是参考单位，而不是硬件像素。

一英寸，三种名称

记住这些单位描述的是同一段物理距离，就能最容易地区分它们。下面每个条形的宽度都正好是一英寸：

pt 转 px 转换表

CSS 应使用网页列。将 PDF 导出为栅格图像、排版打印文件或设置将要打印的位图文字大小时，应使用 300 DPI 列。

为什么相同的点大小会得到不同的像素数量

这是最容易让人困惑的一点，因此值得明确说明。物理尺寸从未改变：12pt 始终是六分之一英寸。改变的是对这一英寸进行采样的精细程度。

• 72 DPI ——历史上的 Macintosh 屏幕分辨率，专门选择为 1pt = 1px。一些旧版图像处理流程仍以此为默认值，这就是为什么 12pt 文字有时导出后只有令人失望的 12 像素。
• 96 DPI ——Windows 默认值，也是 CSS 所依据的参考分辨率。这是网页结果，也是浏览器使用的值。
• 150 DPI ——草稿印刷质量，或用于从远处阅读的大幅面作品。
• 300 DPI ——商业印刷标准。300 DPI 导出文件中的 12pt 图注需要 50 像素高度，而不是 16 像素。
• 600 DPI ——精细线稿、高端印刷，以及需要清晰细线的激光输出。

如果你曾经以“正确的尺寸”导出作品，却发现文字变得模糊且像素化，那么这个比例几乎总是原因：版式以点为单位测量，但栅格图像却以 72 或 96 DPI 而不是 300 DPI 生成。

点大小实际测量的是什么

12pt 字体并不是 12 点高的可见字母。点大小描述的是em 方框——字体在其上绘制的不可见设计网格。字母占据这个方框的多少完全取决于字体设计师，因此相同点大小的两种字体在视觉比例上可能差异很大。

在 CSS 中应该使用 pt 还是 px？

屏幕样式请使用 px 或 rem。点是 CSS 中的绝对单位，与 px 完全一样，因此也存在相同的无障碍缺点：使用 pt 设置的文字会忽略访问者的浏览器字号偏好。使用 pt 还容易造成混淆，因为阅读样式表的同事可能会以为它表示输出设备上的物理点，而实际并不是。

pt 真正适合的地方是打印样式表，因为输出确实以英寸测量：

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

浏览器在生成打印任务时会根据真实纸张尺寸映射这些点，因此页面上的 11pt 正好会以 11pt 输出——与文字处理器生成的大小相同。

将 Word 或 InDesign 文档转换到网页

1. 直接从文档的样式表中取出点大小——通常正文为 11pt，小标题为 16pt，标题为 24pt。
2. 将它们全部粘贴到值字段中，用逗号分隔，并将分辨率保持为 96。
3. 读取 CSS 像素列。11pt 变为 14.67px，16pt 变为 21.33px，24pt 变为 32px。
4. 发布前将数值四舍五入为整洁的比例。印刷排版可以容忍奇数小数；网页字号比例使用整数或半像素看起来更好，因此 14.67px 通常会变为 15px 或 16px。
5. 如果设计系统使用相对单位，则将最终像素值转换为 rem。

相关 CSS 绝对单位

点是 CSS 依据同一个 96 像素英寸定义的一小组绝对单位之一。了解完整的单位家族后，转换就很简单：

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc（pica）= 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q（四分之一毫米）= 0.945px

如何使用此转换器

1. 选择方向：pt → px 或 px → pt。
2. 输入数值：输入一个数字，或输入一整套用逗号或空格分隔的字号比例（一次最多 20 个）。接受并忽略 12pt 等末尾单位。
3. 设置输出分辨率：CSS 和网页工作请保持 96 DPI，或者点击 72、150、300 或 600 DPI 的选项。
4. 点击转换：查看结果、DPI 对比、实际字号预览、毫米刻度尺和参考比例表。
5. 复制 CSS：点击一个按钮即可复制所有 font-size 声明，源点值会保留在注释中。

常见问题

如何将 pt 转换为 px？

将点数值乘以输出分辨率，再除以 72，因为一个点是英寸的七十二分之一。在网页中分辨率固定为 96 DPI，因此 px = pt × 1.3333。例如 12pt 是 16px。

12pt 是多少像素？

在 CSS 和任何浏览器中，12pt 正好是 16px。在 300 DPI 的打印或图像文件中，同样的 12pt 字体高度为 50 像素；在 600 DPI 时为 100 像素，因为像素数量随分辨率缩放，而物理尺寸保持不变。

1pt 总是 1.3333px 吗？

在 CSS 中始终是 1.3333px，因为 CSS 规范将一英寸固定为正好 96 像素。栅格输出不是如此：在 300 DPI 下一个点是 4.1667 个设备像素，而在 72 DPI 下一个点正好是一个像素。

pt 和 px 有什么区别？

点是等于英寸七十二分之一的物理排版单位，用于印刷、文字处理器和桌面出版。像素是显示单位。在 CSS 中，像素同样锚定到英寸九十六分之一的物理参考值，这就是为什么这两个单位在网页中按固定比例转换，而在图像文件中却不是。

在 CSS 中应该使用 pt 还是 px？

屏幕样式请使用 px 或 rem，并将 pt 留给打印样式表。点是物理绝对单位，因此使用 pt 设置的文字会忽略访问者的浏览器字号偏好。在 @media print 代码块中，pt 是自然的单位，因为输出确实以英寸测量。

印刷应该使用多少 DPI？

300 DPI 是商业印刷和照片质量输出的标准；150 DPI 适合草稿以及从远处观看的大幅面作品；600 DPI 用于精细线稿和高端印刷。请将分辨率字段设置为打印机或导出对话框所要求的值。

为什么屏幕上的 12pt 文字不是 12 点高？

点大小描述的是字体的 em 方框，也就是字母在其上绘制的设计网格，而不是任何单个字形的高度。大写高度通常约为 em 大小的 70%，小写 x-height 约为 50%，因此 12pt 大写字母的高度大约为 8.4pt。

设备像素比会改变 pt 到 px 的转换吗？

不会。在 2× 或 3× 显示屏上，浏览器仍会将 12pt 报告为 16 个 CSS 像素，然后使用 32 或 48 个硬件像素渲染这 16 个 CSS 像素。CSS 像素是参考单位，因此样式表中的数字永远不会改变——增加的硬件像素只会让相同大小看起来更清晰。

其他资源

• CSS 长度单位 - MDN
• 绝对长度 - W3C CSS Values