分类 标签 存档 ME! 黑客派 订阅 搜索

长度单位 PX/EM/PT/EM 区别及其转换公式与对照表

176 浏览

在网页设计 css 中,经常用到字体,而字体大小的设置单位,常用的有 2 种:px、pt。这两个有什么区别呢?

  先搞清基本概念:px 就是表示 pixel,像素,是屏幕上显示数据的最基本的点;而 pt 就是 point,是印刷行业常用单位,等于 1/72 英寸。

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

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

  因此就有这样的说法,在网页设计中,pixel 是相对大小,而 point 是绝对大小。

  但这种说法其实还是有问题,先来看看下面的例子:


文字 72px


文字 72pt


文字 96px


  从上面的字体中我们能看出 72px 要比 72pt 小一些,但 96px 正好和 72pt 一样大小 。

  让我们来调整电脑的设置:在桌面上右键 > 属性 > settings > Advanced > General > DPI setting > 96 DPI。

  试着改变设置,设为 72DPI,重启,再打开浏览器看:72px 已经等同于 72pt 了。为什么?

  还是再做个实验:分别用 800×600 和 1024×768 看刚才的例子,明显高分辨率下,文字就变小。而且,关键的是,无论用 px 还是 pt,都会变小。pt 并没有如有些人所说,是 “绝对” 的,“固定”的。

  但如果用打印机把这页面打印出来,就可以看到:无论屏幕用什么分辨率,打印出来大小都是一样的(这是当然的)。

  首先要分清 “屏幕效果” 和“打印效果”这两个概念:

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

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

  那在页面设计中到底是用 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 或中,使用 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,em,ppi 的区别,就应该更近一步去转换它了

 

 

 

PX、PT、EM、ex 和 in 等都是我们常用的长度单位,尤其在网页的字体大小中经常用到。但是你知道 PX、PT 和 EM 之间是如何进行准换的吗?这
里 icech 为大家找到了一个 px、pt、em 和 percent 大小转换的一个表格,尤其针对字体大小的转换十分方便。希望大家能够喜欢!

PX 和 PT 转换的公式:

以前 icech 在文章中介绍过 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%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

欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

评论  
留下你的脚步
推荐阅读