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

------------------------------------------------

本文引用自:http://www.douban.com/note/155032221/

PT与PX区别的更多相关文章

  1. pt和px区别 pt是逻辑像素,px是物理像素

    pt和px区别 pt是逻辑像素,px是物理像素字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是po ...

  2. PT与PX,em(%)区别

    字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是point,是印刷行业常用单位,等于1/72英寸. ...

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

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

  4. css中pt、px、em、ex、in等这类长度单位详细说明

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

  5. PT,PX,DPI

    [iOS]查找数组NSArray中是否包含指定的元素 http://blog.csdn.net/zyq527758142/article/details/51278172 Dpi(每平方英寸像素数目) ...

  6. PT 转 PX

    pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...

  7. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

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

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

  9. px、em、pt之间的区别与互相转换

    关于px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文(原网址已失效,这是其他站点) 这里引用的是Jor ...

随机推荐

  1. Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十)

    1 非抢占式和可抢占式内核 为了简化问题,我使用嵌入式实时系统uC/OS作为例子 首先要指出的是,uC/OS只有内核态,没有用户态,这和Linux不一样 多任务系统中, 内核负责管理各个任务, 或者说 ...

  2. powershell脚本之windows服务与进程

    powershell脚本之windows服务与进程 服务与进程的区别: Windows服务是指系统自动完成的,不需要和用户交互的过程,可长时间运行的可执行应用程序 进程是程序运行的实例,系统会给运行中 ...

  3. CentOS7 Python2 和Python3 共存(Python3安装)【转】

    1.查看是否已经安装Python CentOS 7.2 默认安装了python2.7.5 因为一些命令要用它比如yum 它使用的是python2.7.5. 使用 python -V 命令查看一下是否安 ...

  4. vs2010 2013 2015 有用各种功能插件

    https://blog.csdn.net/daydayup_chf/article/details/80803221

  5. Go学习笔记07-结构体与方法

    Go学习笔记07-结构体与方法 Go语言 面向对象 结构的定义与创建 面向对象 Go语言只支持封装,不支持继承和多态. Go语言中只有struct,即结构体:没有class. 结构的定义与创建 pac ...

  6. RESTful学习笔记

    作为一名只有几个月IT自学经历的人,在接受新知识的时候总是想找到浅显易懂的方式去理解,但往往却很难找到相关的文章,大部分都是针对具有一定经验的开发人员,因此在看了很多相关的文章才对RESTful架构有 ...

  7. java爬虫代理

    public static Document getDocByJsoups(String href) { String ip = "124.47.7.38"; int port = ...

  8. 裸奔的智能插座:博联Broadlink SP2/SP mini的分析、破解

    https://www.jianshu.com/p/028b10bc3dd1 智能设备的联动通常采用IFTTT的方式,但这种方式受限于官方软件提供的功能.想要自主地灵活控制,需要有官方SDK,或知道协 ...

  9. python flask里 post请求,JSON数据获取方式总结

    #!flask/bin/python #encodig=utf-8 # _*_ coding:utf-8 _*_ # Writer : byz # dateTime : 2016-08-05 from ...

  10. 吴恩达课后作业学习1-week4-homework-multi-hidden-layer -2

    参考:https://blog.csdn.net/u013733326/article/details/79767169 希望大家直接到上面的网址去查看代码,下面是本人的笔记 实现多层神经网络 1.准 ...