揭秘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 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

553
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(四)边框图片,过渡

并且,添加边框图片是以背景的方式添加的,所以会有可能文字覆盖在边框的情况,后面也会介绍处理方法。

311
来自专栏编程

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

1665
来自专栏互联网杂技

CSS伪元素的妙用--单标签之美

本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素。伪类...

32610
来自专栏前端说吧

小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏

3714
来自专栏Android开发小工

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件,那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作,外部的滑动控件就不能获取到这个滑动动...

603
来自专栏blackheart的专栏

1.[Andriod]之Andriod布局 VS WinPhone布局

0.写在前面的话 近来被HTML+CSS的布局折腾的死去活来,眼巴巴的看着CSS3中的flex,grid等更便捷更高效的的布局方式无法在项目中应用,心里那叫一个...

1998
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

492
来自专栏张高兴的博客

张高兴的 UWP 开发笔记:用 Thumb 控件仿制一个可拖动 Button

2855
来自专栏菜鸟前端工程师

html+css学习笔记004-元素选择器0背景属性

815

扫描关注云+社区