工具用的顺手吗?
你的反馈能帮助我们做得更好
为设计师和开发者提供的像素(PX)与点(PT)单位换算工具,支持自定义PPI,用于字体排版与布局适配。
概览
了解工具能解决的问题、计算或处理逻辑,以及数据边界。
默认密度为 96 时,16px 会换算成 12pt,反向输入 12pt 也会得到 16px。计算器允许编辑 PX、PT 和标为“DPI”的密度数值,适合核对网页单位关系,也能按指定的每英寸像素数估算栅格图像中的物理点数。这里的关键不是先背一个固定倍率,而是先判断 PX 属于 CSS 长度,还是图像中实际存在的像素数量。
PT(point,点)是排版长度单位,72pt 等于 1 英寸。PX 在 CSS 中是参考像素单位;在位图尺寸中,PX 又常指横向或纵向的实际像素个数。两种语境都写作 px,但是否需要自定义密度,答案不同:换算 CSS 声明时采用固定的 96px/英寸关系;把位图像素对应到物理长度时,才需要目标图像的每英寸像素数。
设密度输入值为 D。页面把“DPI”字段中的数值直接代入每英寸对应多少像素的换算关系,两个方向的公式互为逆运算:
PX 转 PT:PT = PX × 72 ÷ D
PT 转 PX:PX = PT × D ÷ 72
72 来自 1 英寸等于 72pt;D 决定同一英寸中按多少个像素计算。D 越大,同样的 PX 数对应的 PT 越小;同样的 PT 则需要更多 PX。主输入结果最多显示四位小数,页面下方的常用 PX 对照值最多显示三位小数,因此对照表与输入框偶尔会呈现不同的小数位数,但使用的是同一组换算关系。
CSS 绝对长度单位之间采用固定比例:1in = 96px,同时 1pt = 1/72in。由此可得 96px = 72pt、1px = 0.75pt、1pt = 1.3333…px。这个 CSS 比例不随手机、显示器或打印机的硬件像素密度改变,所以目标是把样式表中的 px 与 pt 互换时,应保留默认密度 96。
指南
按步骤完成操作,并通过示例核对输入与结果。
换算 CSS 数值时保留“DPI”为 96。若任务涉及位图的目标物理尺寸,则填写交付要求中的图像每英寸像素数;虽然字段显示为 DPI,计算时该数字承担的是每英寸像素密度 D 的作用。
在“像素 (px)”输入框填写数值,右侧“点 (pt)”会给出换算结果。页面下方还列出 8、12、14、16、18、20、24、32、48、64px 的快捷对照,选择其中一个数值即可带入当前密度。
直接修改“点 (pt)”输入框,左侧会按同一个密度反算 PX。两个结果旁都可以复制当前数值,便于粘贴到规格表或交付说明。
点击“重置”可恢复 16px 与密度 96,再从默认示例重新计算。对比多个密度时,先记录原始 PX 或 PT,避免把上一次已经舍入的结果继续当作新输入。
网页单位示例:把 PX 填为 16、密度保留 96,代入公式得到 16 × 72 ÷ 96 = 12pt。再把 PT 改为 12,反算为 12 × 96 ÷ 72 = 16px。这一组适合核对 CSS 中常见的 16px 与 12pt。
图像密度示例:把密度改为 300,再输入 48px,结果为 48 × 72 ÷ 300 = 11.52pt。若反向输入 12pt,结果则是 12 × 300 ÷ 72 = 50px。两个算例说明:原始数值不变而密度改变时,输出也会改变,交付记录必须连同密度一起保存。
还可以用 144 作为一组整洁的核对值:24px × 72 ÷ 144 = 12pt,反向计算 12pt × 144 ÷ 72 = 24px。若页面显示值与手算不同,先检查当前密度是否仍为上一组数值。
场景
查看这项工具在不同工作与生活流程中的用法。
前端开发者收到以 pt 标注的网页排版规范,需要转成 CSS px 时,可把密度保持为 96。例如规范中的 12pt 对应 16px;结果用于单位等价核对,而不是测量显示器上的实际毫米长度。
设计人员已知位图的像素尺寸和目标图像 PPI,希望把其中一段像素长度换成排版点数时,可把该 PPI 数值填入密度字段。交付时同时写明 PX、PT 和密度,接收者才能复算。
团队需要比较网页稿与印刷版的数字规格时,可分别按 CSS 的 96 口径和印刷图像的目标 PPI 计算。两次结果并列记录,可以避免把同一个“px”误认为同一种物理长度。
问答
集中解答高频疑问与容易混淆的问题。
它取决于密度 D,通式是 1px = 72 ÷ D pt。按 CSS 的 96 基准计算,1px = 0.75pt;若 D 为 300,则 1px = 0.24pt。
可以。修改右侧 PT 输入框后,左侧会按 PX = PT × D ÷ 72 反算;例如密度 96 时,9pt 对应 12px。
不是必然。这里的 96 首先对应 CSS 规定的 px 与英寸固定关系,不等于对当前屏幕硬件密度的测量。换算 CSS 数值无需读取设备实际 PPI。
须知
使用前了解适用范围、结果限制与必要提醒。
推荐
查找相关工具、专题与可用的 API 能力。