揭秘PhotoShop中的点与像素

HTML5学堂：PhotoShop当中，存在着这样一个单位 —— 点。对于设计师们，估计再熟悉不过了，但是对于前端开发攻城狮们，稍有些郁闷，因为点并不会完全等于像素~！有时，前端开发们还要面对有小数点的字体大小，如10.8点。到底“点”和“像素”是个怎么关系呢？为何会出现小数点呢？我们今天一起来揭秘点(pt)与像素(px)

“点”和“像素”的关系

px = pt * DPI / 72

换句话说，在72dpi的分辨率情况下（72dpi也是网站设计中最常见的分辨率），pt（点）与px（像素）可以基本等价~！

使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，数值越大，字体就越大。

不同的分辨率下，同样点数的字体大小不同

在不同分辨率的PSD文件当中，同样点数的文字，字体大小不同。但是同样像素的文字，字体大小保持不变。一起来看比较图：

如上的三组文字，“H5”均设置的是30点；“HTML5学堂”均设置的是30像素。

网页常用的是72的分辨率大小，此处从上到下，依次是72、200、300（印刷品）的分辨率大小。

PS：为了方便比较，我将三张图片分别存储，之后又放置到了一张图当中。

设计图中字体存在小数点的原因

第一，设计师使用了px为单位进行设计，可能采用了大于72dpi的分辨率。而前端攻城狮，通常并不会对自己的PS做首选项设置（通俗的说，就是设计师的设计文件中，字体以px为单位，而攻城狮使用PS打开文件的时候，默认字体以pt为单位。是的，一定是你的“打开方式不对~~~”），当单位由px转成pt的时候，是有可能变成小数的。

第二，如果设计师使用了Ctrl+T，对文字进行了缩放处理，会出现小数点

如何改变PS的文字度量单位（点或像素）

改变PS的文字度量单位（点或像素），将点改成像素，会更有利于我们进行页面的制作，能够更直观的查看每个文字的字体大小（无论哪种分辨率下）。

选择菜单中的“编辑”——>“首选项”——>“单位与标尺”

然后将文字的单位选择为“像素”即可

此时原有的点会被换算为字体像素大小哦~！如图：

改变单位之前（单位使用点-pt时）

改变首选项中的默认字体单位

改变首选项之后（文字字体单位为px）

本文章内容小编：HTML5学堂-利利。耗时3h~

欢迎沟通交流~HTML5学堂