在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换:

定义字体大小有常见三种单位,px、em、pt

px

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

em

em:即%,是相对单位,是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。,一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。

在一个页面上给定了一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以自由缩放,比如用来制作可伸缩的样式表。

pt

PT是point(磅)缩写,是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字,字体的大小在不同屏幕(同样分辨率)下一样,这样可能会对排版有影响,但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览,而是输出打印。当打印到实体时,pt作为一个自然长度单位就方便实用了:比如Word中普通的文档都用“宋体 9pt”,标题用“黑体 16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。

转换

浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px也就是说1px=0.0625em。为了简化font-size的换算,可以在css中定义body全局声明font-size=62.5%,也就是定义了默认字体大小为16px*0.625=10px,子元素会继承父级元素的字体大小,于是1em=10px,所以12px=1.2em。px与em的转换通过10就可以得来。但是定义font-size=0.625em或者直接定义12px,这是没有效果的,

此外有一点必须要注意,IE处理汉字时,对于浮点的取值精确度有限,由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。只要将62.5%换成63%就可以了。

pt和px的换算公式也比较简单,pt=px乘以3/4。

参考来自:http://www.cnblogs.com/dolphinX/p/3237054.html

HTML中字体单位px pt em之间的转换的更多相关文章

  1. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  2. 微信小程序 尺寸单位px与rpx之间的转换(入门篇)

    1.rpx:微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应.规定屏幕宽度为750rpx. 微信官方建议视觉稿以iphone6为标准. 2.个人示例测试: ...

  3. Android中dip, dp, px,pt, sp之间的区别:

    Android中dip.dp.sp.pt和px的区别   1.概述 过去,程序员通常以像素为单位设计计算机用户界面.例如:图片大小为80×32像素.这样处理的问题在于,如果在一个每英寸点数(dpi)更 ...

  4. CSS中的单位px、em、rem、%、vw、vh、vm

    px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

  5. 关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

  6. px和em之间的转换

    很多网页设计者在写css时都是在通用选择器中就设置了字体的大小,中文情况下一般为12px.然而IE浏览器却无法调整那些使用px作为单位的字体大小.其实使用em作为单位是可以避免这一情况的. 一.em和 ...

  7. css中的单位px,em和rem的区别

    一.px: px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页.当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大.由于这种问题,就提出了使用 ...

  8. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  9. CSS文字大小单位px、em、pt(转)

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

随机推荐

  1. A*算法研究

    许多工业与科学计算问题都可以转化为在图中寻路问题.启发式的寻路方法将问题表示为一个图,然后利用问题本身的信息,来加速解的搜索过程.一个典型的例子是有一些通路连接若干城市,找出从指定起点城市到指定终点城 ...

  2. Google Colab的一些注意事项

    1.执行命令行前面加! 当我们使用python解释器时,我们需要不停地在命令行和IDE 之间切换,当我们需要使用命令行工具时.不过,Jupyter Notebook给了我们在notebook中运行sh ...

  3. python 实例方法,类方法,静态方法,普通函数

    python中有实例方法,类方法,静态方法,普通函数 类方法需要@ classmethod 修饰并且有个隐藏参数 cls,实例方法必须有个参数 self, 静态方法必须有 @staticmethod修 ...

  4. linux yum 安装mysql

    1.安装查看有没有安装过: yum list installed MySQL* rpm -qa | grep mysql* 查看有没有安装包: yum list mysql* 安装mysql客户端: ...

  5. Bootstrap历练实例:表单控件大小

    表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...

  6. Xcode的Git管理

    在Xcode中创建工程的时候,我们很容易的可以将新创建的工程添加到Git中,如图: 但是如果是本地已经有的工程,那该如何添加到Git中呢? 首先终端进入到该工程的目录. 然后: git init gi ...

  7. 使用CSS来制作类似「黑幕」的效果

    网上几乎没有看到这类的代码,留个档 .heimu,.heimu a{ background-color: #252525; color:#252525; text-shadow: none; }::s ...

  8. P2261 bzoj1257 [CQOI2007]余数求和

    一道数论分块首先这类的求和写一下公式∑n%i=∑n-i*(n/i)= ∑n-∑i*(n/i) 前面的好求所以 ans=nk+∑k*(k/i);于是进行分块这里总结一下只要出现除法∑就进行分块由阿尔贝和 ...

  9. docker系列之安装配置-2

    1.docker安装 1.CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 目前,C ...

  10. 《零基础入门学习Python》【第一版】视频课后答案第004讲

    1.while语句中,当条件为真时,它会一直循环下去,比如下面的例子,不过可以用Ctral + C来强制结束 while 'C': print("i love you") 2.观察 ...