揭秘PhotoShop中的点与像素

HTML5学堂:PhotoShop当中,存在着这样一个单位 —— 点。对于设计师们,估计再熟悉不过了,但是对于前端开发攻城狮们,稍有些郁闷,因为点并不会完全等于像素~!有时,前端开发们还要面对有小数点的字体大小,如10.8点。到底“点”和“像素”是个怎么关系呢?为何会出现小数点呢?我们今天一起来揭秘点(pt)与像素(px)

“点”和“像素”的关系

px = pt * DPI / 72

换句话说,在72dpi的分辨率情况下(72dpi也是网站设计中最常见的分辨率),pt(点)与px(像素)可以基本等价~!

使用px定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,数值越大,字体就越大。

不同的分辨率下,同样点数的字体大小不同

在不同分辨率的PSD文件当中,同样点数的文字,字体大小不同。但是同样像素的文字,字体大小保持不变。一起来看比较图:

如上的三组文字,“H5”均设置的是30点;“HTML5学堂”均设置的是30像素。

网页常用的是72的分辨率大小,此处从上到下,依次是72、200、300(印刷品)的分辨率大小。

PS:为了方便比较,我将三张图片分别存储,之后又放置到了一张图当中。

设计图中字体存在小数点的原因

第一,设计师使用了px为单位进行设计,可能采用了大于72dpi的分辨率。而前端攻城狮,通常并不会对自己的PS做首选项设置(通俗的说,就是设计师的设计文件中,字体以px为单位,而攻城狮使用PS打开文件的时候,默认字体以pt为单位。是的,一定是你的“打开方式不对~~~”),当单位由px转成pt的时候,是有可能变成小数的。

第二,如果设计师使用了Ctrl+T,对文字进行了缩放处理,会出现小数点

如何改变PS的文字度量单位(点或像素)

改变PS的文字度量单位(点或像素),将点改成像素,会更有利于我们进行页面的制作,能够更直观的查看每个文字的字体大小(无论哪种分辨率下)。

选择菜单中的“编辑”——>“首选项”——>“单位与标尺”

然后将文字的单位选择为“像素”即可

此时原有的点会被换算为字体像素大小哦~!如图:

改变单位之前(单位使用点-pt时)

改变首选项中的默认字体单位

改变首选项之后(文字字体单位为px)

本文章内容小编:HTML5学堂-利利。耗时3h~

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-03-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

18210
来自专栏杂七杂八

css布局使用

目录 常用居中 垂直居中 水平居中 垂直水平居中 单列布局 双列&三列布局 ---- 常用居中 垂直居中 单行文本垂直居中 <div class="pare...

2849
来自专栏Java Edge

CSS 全解析实战(三)-CSS 基础1 选择器(1)背景非布局样式(边框)非布局样式(滚动)非布局样式(文本折行)非布局样式(装饰性属性)hack和案例(1)hack和案例(2)面试题

441
来自专栏腾讯NEXT学位

CSS布局解决方案(上)

2834
来自专栏九彩拼盘的叨叨叨

学习纲要:常见标签和属性

712
来自专栏前端知识分享

第213天:12个HTML和CSS必须知道的重点难点问题

这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮...

872
来自专栏黒之染开发日记

我在移动web开发中遇到的各种问题

目前(2015年8月3日15:02:24)在大部分安卓手机都发现这个问题,触发bug的条件知道了,但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚...

932
来自专栏九彩拼盘的叨叨叨

让内容恰好占一屏,适配各种尺寸的设备的实现

有时候我们会有让内容恰好占一屏,并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意,直接谈如何实现。

683
来自专栏进步博客

CSS表格布局实践

如何实现上图所示效果:左右两列的列宽由列内最宽单元格的宽度决定,进度条列占据剩余空间。(兼容到IE8就好了)

1043
来自专栏别先生

HTML+CSS小实战案例

HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 1 <html> 2 <head...

2009

扫码关注云+社区