pt、px、DPI: 关于长度单位的误解

2016-02-19 17:26 8 1 收藏

图老师小编精心整理的pt、px、DPI: 关于长度单位的误解希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

  在印刷排版中,“point”是一个绝对的单位,它等于 1/72 英寸,可以用尺子丈量的,物理的英寸。但在 CSS 中 pt 的含义却非如此,例如我们指定一个字体是 9pt,我们会以为按照 CSS 规范,它等于:

  9 * 1/72 = 1/8 inch

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  这是一个误解,因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色 (为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以 pt 为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是 DPI (事实上,这里的所谓的 DPI,是操作系统和浏览器中使用的术语,即为 PPI, pixels per inch,和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。

  例如,无论在哪个操作系统中,Firefox 浏览器默认的 DPI 都是 96,那么实际上 9pt = 9 * 1/72 * 96 = 12px。

  所以,虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。

  那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。

  现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。

  有兴趣的朋友可以自己查证一下。

来源:http://www.tulaoshi.com/n/20160219/1615231.html

延伸阅读
标签: PS PS教程
  注:以下效果在WindowsXP和Photoshop CS下测试通过。 在Photoshop中要想得到清晰的汉字,就需要关闭抗锯齿功能。 但是这样当字体小于12px的时候,系统默认的宋体就变得一团糟,而黑体或者其他的外挂字体也都纷纷变得很难看 在确保系统安装有繁体中文及日文支持后,可在Photoshop中使用PMingLiU和MS UI Gothic字体...
标签: 怀孕
在没怀孕甚至没打算怀孕前,我们对怀孕的认识也许仅仅停留在影视剧中某苦逼女主往衣服下塞个枕头假装怀孕或是手术台上产妇撕心裂肺的哀嚎的情景中。年少无知时,对“ 胎动 ”你是否也有过一些雷人又荒唐的误解呢?下面来分享一下小编收集到的关于胎动的一些很傻很天真的理解,来看看吧! 误解1:胎动就是胎宝宝在妈妈肚子里滚来滚去...
tulaoshi.com 四种关于顺产谣言不可相信 其实顺产一点都不可怕,生孩子本来就是一个女人的本能,顺产其实对于孕妈妈还是 宝宝 来说都是有好处的。但是有很多人对顺产的后遗症都有所畏惧,但是那只是对顺产的误解而已。 误解一:顺产不容易恢复体形。 每个 女性 朋友都希望自己能有个好身材,但是很...
标签: Web开发
最典型实用的上中下,并且中间分三列的布局,这个例子有2个特点: 1. 中间三列效果,可以任意实现单列背景色。 2. 整体最窄770px,最宽1024px,也就是说窗口小于770xp就出底部滚动条,如果大于1024px自动屏幕居中。 IE6.0和FF1.5测试通过 [效果浏览] 分析: 最外层的wrapper把所有内容都嵌套在里边,整体相对定位。max min已经很好的控...
卡地亚项链可以加长度吗  可以的。项链款式可以多多挑选,但项链长度丝毫不能凑合,毕竟它才是决定项链整体风格的标志性元素,是你选对项链的第一步。 1 6英寸:似项圈大小超百搭 一般情况下,16英寸的抗联长度大约如人们印象中的项圈一般,而对于身材瘦小的姑娘们大概会在略微靠近锁骨的位置。这样长度的项链似乎可以完美搭配任何服装...

经验教程

775

收藏

6
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部