【pt-px-em】有关磅、像素和em的整理

字体大小的设置单位，常用的有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。

附px、em、%和pt换算表

【pt-px-em】有关磅、像素和em的整理相关推荐

css百分比跟em的区别_查看CSS单位：像素，EM和百分比
单位在测量和建造房屋,桥梁或塔楼等物品方面起着重要作用,并且建造网站也不例外. Web上有多种测量方法,特别是CSS中的像素,EM和Percentage . 在本文中,我们将遍历这些单位,以进一步了解 ...
html中的em等于多少像素,CSS中的em运用详解，1em等于多少像素？
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
html像素和em转换,CSS3中的弹性布局em运用入门详解 1em等于多少像素
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
字号和字体镑数,pt,px
字号.pt.px.em换算对照表 pt (point,磅) 是一个物理长度单位,指的是72分之一英寸. px (pixel,像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成 ...
[iOS @2x @3x pt px 分辨率]
@2x @3x 什么时候用? 先看各个机型数据图,以这个为标准. 对照的pt / px分辨就是尺寸(point)/分辨率(像素点) 我们先看何为pt px pt就是point,是印刷行业常用单位, ...
HTML语言中Em单位,HTML5中单位em的理解
相关链接 em何意? 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位.一般浏览器字体大小默认为16px,则2em == 32px: 1em=元素中文本的1个垂直高度如果元素中文本的大 ...
梯度下降和EM算法，kmeans的em推导
I. 牛顿迭代法给定一个复杂的非线性函数f(x),希望求它的最小值,我们一般可以这样做,假定它足够光滑,那么它的最小值也就是它的极小值点,满足f′(x0)=0,然后可以转化为求方程f′(x)=0的根 ...
oracle em登陆失败,oracle的em登陆失败解决办法
Oracle数据库EM登陆失败的解决办法重新配置em emca -config dbcontrol 解决em无法启动问题两个命令:C:\>set ORACLE_HOSTNAME=localho ...
【Android 屏幕适配】屏幕适配基础概念 ② ( 像素 px 与密度无关像素 dip | 像素 px 与密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 )
文章目录一.像素 px 与密度无关像素 dip 二.像素 px 与密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度 ...

【pt-px-em】有关磅、像素和em的整理

【pt-px-em】有关磅、像素和em的整理相关推荐

最新文章

热门文章