pt和px区别 pt是逻辑像素,px是物理像素

pt和px区别 pt是逻辑像素,px是物理像素
字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢?
先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;
pt就是point,是印刷行业常用单位,等于1/72英寸。

以iPhone8为基础750做的设计pt单位的,再网页中用px做单位要在pt基础上乘以2了

以iPhone8为基础750做的设计pt单位的,再网页中用px做单位要在pt基础上乘以2了

逻辑像素和物理像素:
逻辑像素(logic point):逻辑像素的单位是PT,它是按照内容的尺寸计算的单位。比如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍,即1pt=2px,那么其实iPhone 4的物理像素是960x640px。iOS开发工程师和使用Sketch和AdobeXD软件设计界面的设计师使用的单位都是PT。

物理像素的单位就是我们常说的pixel,简写成PX。它是我们在Photoshop和切图中使用的单位,屏幕设计中最小的单位就是1px不可再分割。使用Photoshop设计移动端界面和网站的设计师使用的单位是PX。在以下的文章中,如果您使用Photoshop设计界面,那么只需要记住所有px单位的数值和支持Photoshop的工具,如果使用Sketch或Adobe XD设计界面,那么只需要记住所有pt单位的数值和对应的工具即可。

===============
px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对长度”。

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

因此就有这样的说法,pixel是相对大小,而point是绝对大小。

分清“屏幕效果”和“打印效果”:

在浏览网页过程中,所有的“大”“小”概念,都是基于“屏幕”这个“界面”上。“屏幕”上的各种信息,包括文字、图片、表格等等,都会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏览。

那是不是用pt做单位就没这样的问题呢?错!问题同样出现。刚才的例子已经很清楚的说明,在不同分辨率下,无论是px还是pt,都会改变大小。以现在的电脑屏幕情况,还没有一种单位可以保证,在不同分辨率下,一个文字大小可以“固定不变”。因为这很难以实现也不是很有必要:全球电脑用户以亿来数,屏幕从14寸到40寸甚至更高都有,屏幕大小不同,分辨率也不同,要保证一个字体在所有用户面前大小一样,实在是MISSION IMPOSSIBLE。另外,电脑有其自身的调节性。

那在页面设计中到底是用px还是pt呢?

我认为,这个并没有什么原则性差异,就看自己处于什么角度思考了。

Mac机怎么情况不清楚,在Windows里,默认的显示设置中,把文字定义为96DPI(PPI,微软都将DPI和PPI混为一体,我们也就无须较真了)。这样的定义,说明了:1px=1/96英寸。联系pt的概念,1pt=1/72英寸,可以得出,在这样的设置中,1px=0.75pt,常见的宋体9pt=12px。在显示器分辨率不变的基础上(比如现在常用的1024×768),1px大小也就固定不变,改变显示设置,调整为144DPI,可以得出,1px=0.5pt,常见的宋体9pt=18px。原先用12px来组成的一个文字,现在需要18px来组成,px多了,文字就“大”了,更易阅读了。

所以,px和pt的使用区别,只有当用户改变默认的96DPI下才会产生:使用px定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,当用户设置超过96DPI的值,数值越大,字体就越大。

  (附公式:px = pt * DPI / 72) 对了,刚才还提到改变浏览器中文字大小的选项,也可以改变网页的文字大小。但在这种情况下,使用px和pt都是无效的,因为这2个都是有实际“pixel”数值的单位,比如9pt是12px,大小固定。这里要引用新的单位:em,其实就是%。因为当网页中的字体没有给出实际的px或pt定义的话,会有一个默认值:12pt即16px,对应浏览器中“字体大小”中的“中等”,以这个为标准,变大或缩小。(只适用于IE,在FF中,即便定义px或pt也都可以变大变小)

所以,从这个概念上看,em才是真正的“相对单位”(百分比嘛,当然是相对),而px和pt都是绝对单位(都有固定值)。

在网页设计中,面向用户的屏幕的基本单位是px,因此使用px作为单位是最简单也最容易理解的,而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示,算是绕了个圈子。参考大部分大型网站,包括Adobe和Microsoft,都是使用px作为单位,而且在HTML中,默认的单位就是px,是不是也暗示着px是网页设计的“内定单位”?

但在Word或Photoshop中,使用pt就相当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览,而是输出打印。当打印到实体时,pt作为一个自然长度单位就方便实用了:比如Word中普通的文档都用“宋体 9pt”,标题用“黑体 16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。又或者在Photoshop中,设置一个图片中的某个艺术效果的字体是72pt大小,然后分别将这张图片设为300DPI和72DPI,再打印出来,就可以看出,这2个字体大小完全一样,只是“清晰度”不同,300DPI更清晰。这是毫无疑问的结果。

  最后整理一下所有出现过的单位:

  px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便;

  pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;

  em:即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。

  PPI(DPI):pixel(dot)per inch,每英寸的像素(点)数,是一个率,表示了“清晰度”,“精度”

PX和PT转换的公式:

以前在文章中介绍过PX和PT的转换规则,其实很简单,pt=px乘以3/4。

比如12px×3/4=9pt大小。

PX和em转换的公式:

对于PX转em的方法也类似,就是em=16乘以px,也就是说1.5em=1.5×16=24px。


设计中常用PX/EM/PT/百分比转换表格

Pixels 

EMs 

Percent 

Points

6px 

0.375em 

37.50%

5pt

 

7px 

0.438em 

43.80%

5.5pt

 

8px 

0.5em 

50%

6pt

 

9px 

0.563em 

56.30%

7pt


10px 

0.625em 

62.50%

8pt

 

11px 

0.688em 

68.80%

8pt

 

12px 

0.75em 

75%

9pt

 

13px 

0.813em 

81.30%

10pt

 

14px 

0.875em 

87.50%

11pt

 

15px 

0.938em 

93.80%

11pt

----------
16px 

1em 

100%

12pt

17px 

1.063em 

106.30%

13pt

18px 

1.125em 

112.50%

14pt

19px 

1.188em 

118.80%

14pt

20px 

1.25em 

125%

15pt

21px 

1.313em 

131.30%

16pt

22px 

1.375em 

137.50%

17pt

23px 

1.438em 

143.80%

17pt

24px 

1.5em 

150%

18pt
------------

字号 磅数 毫米

八号 5磅 1.84

七号 5.5磅 2.12

小六号 6.5磅 2.45

六号 7.5磅 2.81

小五号 9磅 3.15

五号 10.5磅 3.70

小四号 12磅 4.25

四号 14磅 4.93

小三号 15磅 5.23

三号 16磅 5.55

小二号 18磅 6.37

二号 22磅 7.80

小一号 24磅 8.42

一号 26磅 9.66

小初号 36磅 11.1

初号 42磅 12.7

posted @ 2019-03-02 15:15  大自然的流风  阅读(21696)  评论(0编辑  收藏  举报