在网页设计、样式代码编程过程中经常用到的设置字体大小的有px、pt、em等,本篇文字主要说说这三者的区别。
基本概念:
px 就是表示pixel,像素,是屏幕上显示数据的最基本的点,最小单位;
pt就是point,是印刷行业常用单位,等于1/72英寸。
em, 其实就是%,从这个概念上看,em才是真正的“相对单位”。
px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么? 可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对 长度”。
pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准 的长度单位,也称为“绝对长度”。
px会随显示器的分辨率而改变,pt会随Windows系统字体大小设置而改变。
设 置Windows系统字体大小:桌面上右键 > 属性 > 设置 > 高级 > 常规 > DPI 设置,默认的是“正常尺寸96DPI”,你可以自定义修改。
px和pt的使用区别,只有当用户改变默认的96DPI下才会产生:使用px 定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,当用户设置超过96DPI的值,数值越大,字体就越大。
转换计算公 式:px = pt * DPI / 72
在网页设计中,面向用户的屏幕的基本单位是px,因此使用px作为单位是最简单也最容易理解 的,而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示,算是绕了个圈子。参考大部分大型网站,包括Adobe和 Microsoft,都是使用px作为单位,而且在HTML中,默认的单位就是px。
但在Word或Photoshop中,使用pt就相 当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览,而是输出打印。当打印到实体时,pt作为一个自然长度单位就方便实用了:比 如Word中普通的文档都用“宋体 9pt”,标题用“黑体 16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。又或者在Photoshop中,设置一个图片中的某个艺术效果的字体是72pt大小,然后分 别将这张图片设为300DPI和72DPI,再打印出来,就可以看出,这2个字体大小完全一样,只是“清晰度”不同,300DPI更清晰。这是毫无疑问的结果。
分享到:
相关推荐
移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf移动端网页字号pt px em换算对照表.pdf
css中单位px和em的区别
概念介绍: 1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,...通常1em=16px。 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸),
在IE6.0字体设定为中的时候,如果字体未做任何CSS设定或者元素的设定,默认的字体是12pt,或者16px,或者1em,或者font size=3。em、px、pt的换算关系如下: 1em=16px 1em=12pt 1px=1/16 em=0.0625em 1px=3/4 pt=...
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面给大家详细介绍下。 PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的...
基于PTPX的数字电路功耗仿真.docx
字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px ...
1、“Ems”: em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展,2em = 32px , 目前常用的字体大小px换算成em , 16px =...
NULL 博文链接:https://1307111376.iteye.com/blog/1986752
android布局单位sp,dp,pt,px的用法和区别。
项目需要使用PTPX看一下工程的功耗,写了一个使用PTPX做功耗分析的流程。
说说css的几种距离吧,大致有px、em、pt、pc、in、mm、cm、ex八种,其中最常见到的是px,我还见到过的有ex和mm、cm,当然后两个在当年见的更多
为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样1
相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,...下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。
主要介绍了CSS中单位px与em的区别 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
最近在学习字体时遇到字体大小的设置,font-size单位可以是px或em或rem,那么这几种单位都有什么区别呢,该如何使用呢? px是像素图像的基本采样单位,相对于显示器屏幕分辨率而已的,什么是一个像素呢,你把一张图...
时序分析工具pt的用户手册