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

相关文章

来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5257
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3849
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3035
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5276
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2657
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2102
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

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

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2496
来自专栏落花落雨不落叶

canvas画简单电路图

57911

扫码关注云+社区