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

pt和px区别 pt是逻辑像素,px是物理像素的更多相关文章

  1. 物理像素,ppi,逻辑分辨率和物理分辨率

    1 明确几个概念: 物理像素:屏幕物理像素 屏幕像素密度ppi:pixels per inch,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度.顺便一提,ppi就是dpi,只不过有文章里说苹果喜欢 ...

  2. 理解设备像素、设备独立像素、css像素、viewport

    设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率 ...

  3. 设备像素,CSS像素,设备独立像素

    1.概念 设备像素(device pixel)简写DP 设备像素又称 **物理像素** ,是设备能控制显示的最小单位,我们可以把它看做显示器上的一个点.我们常说的 1920x1080像素分辨率就是用的 ...

  4. 设备像素,设备独立像素,CSS像素

    之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...

  5. 适配方案(五)适配的基础知识之设备像素比 dpr 与 1px 物理像素

    设备像素比 dpr 与 1px 物理像素 物理像素(physical pixel) 手机屏幕上显示的最小单元,该最小单元具有颜色及亮度的属性可供设置,iphone6.7.8 为:750 * 1334, ...

  6. PX 和PT的区别

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

  7. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  8. Html代码Font-Size中px与pt的区别

    一个是设备坐标,一个是逻辑坐标,两者是不同的. px是个相对单位,一般像素的参考值为:在一个像素密度是90 pdi的显示器上,正常人从距离显示器28英寸处看一个像素的视角应该不小于0.0227度. 1 ...

  9. px/em/pt区别和转换

    老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的“95%的中国网 ...

随机推荐

  1. 简化equals()方法的重写

    实例说明 在定义类时,属性可以是基本类型也可以是引用类型.当重写equals()方法时一会要用“==”来比较基本类型,一会要用equals()比较引用类型,这样代码看着有些混乱.为此推荐使用Commo ...

  2. react-redux简单的记事本应用

    首先给大家普及一个方法: let data = [ {id:1,text:'手机',check:false}, {id:2,text:'电脑',check:false}, {id:3,text:'平板 ...

  3. python语法_文件操作

    牢记“”“能调用方法的一定是对象”“” 文件的操作流程, 1 建立文件(打开文件)open('filename','模式').read() [这一步其实就是创建对象] 2 通过句柄进行操作 3 关闭o ...

  4. Adobe Premiere Pro CS6 下载安装包成功

    Adobe Premiere Pro CS6 https://pan.baidu.com/s/1miBq59e 下载地址 安装方式 断网(必须):安装官方原版程序: 一.安装前先运行程序包的“必先运行 ...

  5. 外网访问VMware虚拟机

      目的: 主机上安装了VMware,VMware上安装了Linux虚拟机(我安装的是Centos7).我想让虚拟机向外提供Web服务.本文记录如何让我的主机和外网用户可以访问VM虚拟机上的Web. ...

  6. oo第三次总结

    一.(1)规格化设计的大致发展历史 20世纪60年代,随着大容量.高速度的计算机出现,以及大量语言的新增和软件的不可靠,爆发了所谓的“软件危机”.而针对这个问题,人们提出了规格化设计的解决方法.通过把 ...

  7. 现代IM系统中的消息系统架构 - 架构篇

    https://mp.weixin.qq.com/s/sAlI8MCIKUSj5KbcT3W-Lw 现代IM系统中的消息系统架构 - 架构篇 原创: 木洛 云栖社区 1周前

  8. 用jieba库统计文本词频及云词图的生成

    一.安装jieba库 :\>pip install jieba #或者 pip3 install jieba 二.jieba库解析 jieba库主要提供提供分词功能,可以辅助自定义分词词典. j ...

  9. u-boot调试串口输出对应的系统函数

    接上Debug串口,启动机器,u-boot哗啦啦地打印一行行的字符.刚接触u-boot的时候,对机器后台做了什么,几乎一无所知. 如果要很有信心地定制出一个简单并且可靠的系统,或者快速完成一项新的任务 ...

  10. odoo按钮触发下载文件

    测试环境:Odoo8.0 1.在你的模块中创建一个方法,返回url 举个例子, @api.multi def get_stock_file(self): return{'type':'ir.actio ...