字体大小的设置单位,常用的有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/百分比转换表格
Pixels  EMs  Percent  Points     
6px  0.375em  37.50%  5pt     
7px  0.438em  43.80%  5.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     
 
 
 
字号 磅数 毫米
八号 5磅 1.84
七号 5.5磅 2.12
小六号 6.5磅 2.45
六号 7.5磅 2.81
小五号 9磅 3.15
五号 10.5磅 3.70
小四号 12磅 4.25
四号 14磅 4.93
小三号 15磅 5.23
三号 16磅 5.55
小二号 18磅 6.37
二号 22磅 7.80
小一号 24磅 8.42
一号 26磅 9.66
小初号 36磅 11.1
初号 42磅 12.7
(附公式:px = pt * DPI / 72)

PT与PX,em(%)区别相关推荐

  1. Android中dip、dp、sp、pt和px的区别

    1.概述 过去,程序员通常以像素为单位设计计算机用户界面.例如:图片大小为80×32像素.这样处理的问题在于,如果在一个每英寸点数(dpi)更高的新显示器上运行该程序,则用户界面会显得很小.在有些情况 ...

  2. 【Android】dip、dp、sp、pt和px的区别

    转载自: http://www.ityoudao.com/Web/Android_657_2256.html 1.概述 过 去,程序员通常以像素为单位设计计算机用户界面.例如:图片大小为80×32像素 ...

  3. 说说css中pt、px、em、rem都扮演了什么角色

    前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

  4. pt,px,rem和em之间区别总结

    pt与px 在html设计字体的css样式中,有些字体设置成14pt,而不是14px,那pt是什么,和px又有什么关系呢? pt(point)是印刷行业常用的单位,等于1/72英寸,表示绝对长度.px ...

  5. html5 px和em的区别,pt 与 px、em、rem 的区别与换算

    DPI/pt/px 单位的含义 DPI(Dots Per Inch) 每英寸像素数.Windows 系统默认是 96dpi,Apple 系统默认是 72dpi. pt (point,磅) 是一个物理长 ...

  6. px,em,rem,vh,vw,vmin,vmax的区别

    css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...

  7. em表示什么长度单位_css中pt、px、em、ex、in等这类长度单位详细说明

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...

  8. 网页布局中的 px,em,rem,pt

    网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...

  9. pt, px,em,ex,in等这类长度单位

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...

最新文章

  1. java.lang.VerifyError解决方案 Android
  2. createrepo常用参数
  3. react中@withrouter_为什么 withRouter 高阶组件应该 处于最外层?
  4. 9 条非常强大的 JavaScript 技巧
  5. 18-CSS问题-让多个div横排显示并设置间距解决方案
  6. Java 基础知识 【钢镚核恒】
  7. Himawari-8数据下载及命名
  8. es7 创建模板时,报错 Validation Failed: 1: index patterns are missing
  9. canvas 擦除动画_HTML5 canvas橡皮擦擦拭效果
  10. 第九篇:ROS的gazebo三维物理仿真环境联合使用
  11. window中的DLL和linux中的os文件是什么东西
  12. 【2022.09.04】关于升级打怪学编程活动的通知
  13. 用winscppwd查看winscp保存的密码
  14. 二分频电路Verilog设计
  15. 视网膜竞争(双目竞争)现象
  16. 使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别。
  17. CUMTOJ算法作业二
  18. 谁说啤酒不能做互联网?啤酒市场的春天来了,加速版商业模式分享——加速版乐分享商业模式加积分释放双驱动
  19. 获取淘宝商品实时销量2022年最新算法
  20. Tushare Pro判断股市是否开盘

热门文章

  1. jq 数字转中文数字_阿拉伯数字 转换 中文大写
  2. 京东裁员的背后,只会“点点点”的你,真的能度过这一次疫情带来的裁员潮吗?
  3. 【C++习题笔记】谭浩强C++程序设计(第三版)第七章
  4. java面试题saas
  5. github fatal: Authentication failed for解决方法
  6. 2018年山东外贸进出口1.93万亿元创历史新高
  7. 网站开启https后很慢_网站开启https后地址栏安全锁灰色或黄色叹号
  8. surface pro3 禁用触屏方法
  9. Mybatis Plus ${ew.sqlSegment} 与 ${ew.customSqlSegment}的使用区别
  10. 微型计算机是计算器吗,小型计算机和微型计算机是同一个吗?