通常，设计网页时，字体一般会使用像素（px）或者倍数（em）。而在设计工具PS中字体默认是以pt为单位的。就会发生网页重构师用PS打开设计师给过来的稿子，开始切图，在查看文字时，发现字体大小是用pt来设置的，⊙﹏⊙b。羞愧的是，我同是做设计和写网页的，最开始的时候马虎到把pt和px弄混了，今天看到相关的内容，少不得总结一下。PS中字体设置如下图：

http://s5/mw690/7e5c6a06gx6BmtX0pkU84&690

为了解pt和px是如何转换，我们需要先了解一下的概念：

px就是表示pixel，像素，是屏幕上显示数据的最基本的点；

pt就是point，是印刷行业常用单位，等于1/72英寸。

这样很明白，px是一个点，它不是自然界的长度单位，可大可小。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。

pt全称为point，但中文不叫“点”，查金山词霸可以看到，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。

可见pixel是相对大小，而point是绝对大小，px是以屏幕象素为单位，pt是以1/72英寸为单位。

两者换算的计算公式如下：1px = 1pt * 图像分辨率/72 （此分辨率指的是dpi，后文有解释）

下面的问题就是每次写代码的时候都要换算一下？其实不用那么麻烦，这里介绍一个简单的解决办法：

打开PS首选项——编辑，选择"单位与标尺"，如下界面：

http://s14/bmiddle/7e5c6a06gx6BmurmbFP8d&690

选择后出现如下界面，选择像素即可

http://s5/mw690/7e5c6a06gx6BmusKwao94&690

这样就可以把设计稿中的pt单位转换为px了，清楚地看到页面文字的像素。

经验丰富的网页重构师都知道一些常用的字体大小的换算，常用的换算，即是如：12pt=16px；

在最初使用PS的时候，我们被教导着制作屏幕上的图用72像素/英寸以，大的印刷海报要将分辨率设置的大些，高的能达到300像素/英寸，以免糊掉。事实证明，在不明原理死记知识的时候就容易产生误会。之前我一直以为电脑的分辨率就是72像素/英寸，导致我拿到以上的换算公式，再与以往经验相结合就产生了矛盾。那通俗而言的12pt=16px是如何而来的？

在这里同样需要明确几个定义：

Dpi：表示点每英寸；

Ppi：表示像素每英寸；

分辨率：分辨率（resolution，港台称之为解析度）就是屏幕图像的精密度，是指显示器所能显示的像素的多少。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。所以分辨率被表示成每一个方向上的像素数量，比如640X480等。某些情况下也可以同时表示成“每英寸像素”（ppi）以及图形的长度和宽度。比如72ppi，和8X6英寸。

再讲两点容易混淆的地方。其一：我们通常所说的将PS画布设置为“72像素”是一种非常误导的讲法，以至于大一在上数字媒体导论的时候全班搞得一头雾水的。实际上，PS中的设置如图http://s5/small/7e5c6a06gx6BmuurUFK44&690
 

其二：同时ppi和dpi经常都会出现混用现象。从技术角度说，“像素”（P）只存在于计算机显示领域，而“点”（d）只出现于打印或印刷领域。

而实际上，常用的屏幕1024x768或800x600等标准的分辨率计算出来的dpi是一个常数：96。如此，6px=12pt*96/72等式就成立了。以下是前人总结的换算表，我就顺手贴上来了。

具体换算是：
Points     Pixels     Ems   Percent
6pt     8px     0.5em     50%   
7pt     9px     0.55em   55%   
7.5pt   10px     0.625em   62.5%   
8pt     11px     0.7em     70%   
9pt     12px     0.75em   75%   
10pt     13px     0.8em     80%   
10.5pt   14px     0.875em   87.5%   
11pt     15px     0.95em   95%   
12pt     16px     1em       100%   
13pt     17px     1.05em   105%   
13.5pt   18px     1.125em   112.5%   
14pt     19px     1.2em     120%   
14.5pt   20px     1.25em   125%   
15pt     21px     1.3em     130%   
16pt     22px     1.4em     140%   
17pt     23px     1.45em   145%   
18pt     24px     1.5em     150%   
20pt     26px     1.6em     160%   
22pt     29px     1.8em     180%   
24pt     32px     2em       200%   
26pt     35px     2.2em     220%   
27pt     36px     2.25em   225%   
28pt     37px     2.3em     230%   
29pt     38px     2.35em   235%   
30pt     40px     2.45em   245%   
32pt     42px     2.55em   255%   
34pt     45px     2.75em   275%   
36pt     48px     3em       300%