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

px = pt * DPI / 72

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

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

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

HTML5学堂（码匠）：不同的分辨率下，同样点数的字体大小不同

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

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

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

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

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

HTML5学堂（码匠）：设计图中字体存在小数点的原因 - 1

HTML5学堂（码匠）：设计图中字体存在小数点的原因 - 2

HTML5学堂（码匠）：设计图中字体存在小数点的原因 - 3

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

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

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

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

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

HTML5学堂（码匠）：改变单位之前（单位使用点-pt时）

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

HTML5学堂（码匠）：改变首选项中的默认字体单位

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

HTML5学堂（码匠）：改变首选项之后（文字字体单位为px）

HTML5学堂（码匠）

PS里字体单位点和像素的换算是怎么样的？

1pt=1/72英吋。

在72dpi的时候，1pt=1px；

在96dpi的时候，1px=0.75pt，用72/96。

“像素”由【分辨率】来控制。例如PS默认的72像素/每英寸（约等于28.346像素/毫米）。

“点”一般指显示器的显示单位，例如常用的1024*768。

“毫米”指的是打印的纸张，例如A4的297*210。

扩展资料：

例如，常见的取值有 ：

8 bpp[2^8=256；(256色)]；

16 bpp[2^16=65536； （65,536色，称为高彩色）]；

24 bpp[2^24=16777216； (16,777,216色，称为真彩色）]；

48 bpp[2^48=281474976710656；281,474,976,710,656色，用于很多专业的扫描仪]。

256色或者更少的色彩的图形经常以块或平面格式存储于显存中，其中显存中的每个像素是到一个称为调色板的颜色数组的索引值。这些模式因而有时被称为索引模式。

参考资料来源：百度百科-像素

PS中字体大小单位的像素和点有区别吗?

那个可以在首选项里面设置

我去试了试，这个字号和像素是相等的（前提是无抗锯齿），不过意义不大，用多了就知道多少号了。