交互学堂
专注分享专业知识

【干货·基础】字体单位 pt如何换算成 px?或者px如何换算成pt?

px:相对长度单位。像素(Pixel)。
pt:绝对长度单位。点(Point)。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

具体换算是:

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%

像素与毫米的转换 
转换还需要知道另一个参数:DPI(每英寸多少点) 
象素数 / DPI = 英寸数 
英寸数 * 25.4 = 毫米数 
对于显示设备,不管是打印机还是屏幕,都有一种通用的方法 
先用GetDeviceCaps(设备句柄,LOGPIXELSX) 
或者 
GetDeviceCaps(设备句柄,LOGPIXELSY)获得设备每英寸的像素数 
分别记为:px 和 py 
一英寸等于25.4mm 
那么毫米换算成像素的公式为  
水平方向的换算: x * px /25.4 
垂直方向的换算: y * py /25.4 
像素换算为毫米 x * 25.4 / px 
在程序中这么写 
MyControl.Height := 10{mm} * PixelsPerInch * 10 div 254; 
分子和分母同乘以10,将浮点数运算转化为整数运算,效率更高 

常用的1024x768或800x600等标准的分辨率计算出来的dpi是一个常数:96,因此计算出来的毫米与像素的关系也约等于一个常数: 
基本上 1毫米 约等于 3.78像素

字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢?

先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;

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

这样很明白,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。

赞(1) 打赏
未经允许不得转载:IAMUE » 【干货·基础】字体单位 pt如何换算成 px?或者px如何换算成pt?

评论 抢沙发

评论前必须登录!

 

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏