关于长度单位pt、px、dpi的误解
发布时间:2008-06-01 13:30:00
标签:单位,长度,显示,CSS
在印刷排版中“point”是一个绝对的单位,它等于 1/72 英寸。可以用尺子丈量的,物理的英寸。
但在CSS中pt的含义却非如此,例如我们指定一个字体是9pt,浏览器会以CSS规范解释,它等于:
9 * 1/72 = 1/8 inch
这是一个误解,因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色(为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以pt为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是dpi(事实上,这里的所谓的dpi,是操作系统和浏览器中使用的术语,即为PPI, pixels per inch,扫描仪、打印机、数码相机中的DPI是不同的)。
例如,无论在哪个操作系统中,Firefox浏览器默认的dpi都是96,那么实际上:
9pt = 9 * 1/72 * 96 = 12px
所以,虽然“pdi”中的“I”和“1pt”等于1/72 inch中的“inch”,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。
那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。
现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:
9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米
有兴趣的朋友可以自己测试一下。


猜你喜欢
- 使用xlwt读取txt文件内容,并且写入到excel中,代码如下,已经加了注释。代码简单,具体代码如下:# coding=utf-8'
- 设置自动的参数注释标识如何使用pycharm自动添加引用注释描述功能使用场景多行注释,且需要对传入的参数以及返回值进行详尽的阐述时,如下图设
- 本文来给大家介绍一个php版淘宝网查询商品接口代码的例子,下面要改成你的信息的在代码后面都有说明了,同时sdk包我们也要官方下载。下载SDK
- web2.0教程4:如何调用css样式表 这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/&q
- isNaN函数 返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。 NaN 即 Not a Number isN
- 当我们去设计数据库表结构,对操作数据库时(尤其是查表时的SQL语句),我们都需要注意数据操作的性能。这里,我们不会讲过多的SQL语句的优化,
- 相信没有人不知道 Firebug 是什么东西,但有时候我们糟糕的代码不想让同行轻松的使用 F12 就能一览无遗。那么怎么办呢?这里有个猥琐的
- 一般开发,SQL Server的数据库所有者为dbo.但是为了安全,有时候可能把它换成其它的名称,所有者变换不是很方便.这里列出两种供参考
- 在 HTML 中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用 <textarea>
- 一,简介退火算法不言而喻,就是钢铁在淬炼过程中失温而成稳定态时的过程,热力学上温度(内能)越高原子态越不稳定,而温度有一个向低温区辐射降温的
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1.如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- vue2.x前置概念:路由钩子分类一共分3类, 7个钩子路由和组件的概念(方便理解钩子函数)路由和组件是2个概念, 可以粗犷的认为:路由是浏
- 如下所示:# the basic ways = 0for x in range(10): s += x# the right ways =
- 昨天又翻了下前段时间WD内部培训的幻灯片,发现了kejun推荐的一篇好文:Javascript Closures,看了之后受益匪浅。这篇文章
- python模拟登陆网页主要使用到urllib、urllib2、cookielib及BeautifulSoup等基本模块,当然进阶阶段我们还
- python一直被病垢运行速度太慢,但是实际上python的执行效率并不慢,慢的是python用的解释器Cpython运行效率太差。“一行代
- 前言本篇博客主要解决在使用pandas绘制图像并保存时,由于标签太长,导致坐标轴上的标签显示不全的问题。刚遇到问题时调整了一下图片大小,然鹅
- 聚集索引,数据实际上是按顺序存储的,数据页就在索引页上。就好像参考手册将所有主题按顺序编排一样。一旦找到了所要搜索的数据,就完成了这次搜索,
- MySQL是一个开源的关系型数据库管理系统,支持多种操作语言,其中最基础、最常用的命令之一就是SELECT语句。在本篇文章中,这里将详细介绍
- 最近要做个网页图片批量下载工具,然后需要一个页面显示网页上的所有图片供用户勾选,再根据勾选的内容来下载指定图片,其中就涉及到要到同时显示多张