揭秘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前端团队

animation动画实践

由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

2140
来自专栏一“技”之长

iOS9新特性——堆叠视图UIStackView

        随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第...

591
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2426
来自专栏Material Design组件

Material Design — 按钮( Buttons)

37916
来自专栏郭耀华‘s Blog

Android——界面特效 相关知识总结贴

帮助android UI实现动画特效 http://www.apkbus.com/android-79595-1-1.html 帮助android应用程序实现动...

3139
来自专栏我和未来有约会

Silverlight初级教程-绘图布局

Silverlight初级教程 绘图布局 正如之前所说Blend是和flash很像的东西。在这里将介绍一下如何在Blend中绘图。 这里的Blend中“舞台...

1828
来自专栏前端布道

CSS3实现多样的边框效果

931
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之relative

1、relative和absolute的相煎关系   限制作用:①限制left/top/right/bottom定位;②限制z-index层级;③限制在over...

3388
来自专栏yang0range

CSS常见属性

现在的互联网前端三层: HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。 JS ...

1043
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

1975

扫码关注云+社区