问题
第一个项目中UI设计师给的psd图字体单位是像素(px)
,而且通常是整数;做第二个项目时,发现字体的单位是点(pt)
,并且是小数。如下图所示:
点和像素的关系
- point
点是一种标准长度单位,1 pt = 1 / 72 inch
- pixel
像素是屏幕最小发光单位。 - ppi
pixel per inch by diagonal 可简单理解为每英寸的像素数量。
将以上3个概念结合起来,1 inch 有72个pt,1 inch 有 PPI 个 px ;
1 pt = PPI / 72 px
PhotoShop 的默认PPI是72 , 在这种情况下 1pt = 1 px 。
- 在不同分辨率的PSD文件中,同样大小的点数,字体大小不同。
- 同样大小的像素,字体大小相同。
- windows系统默认设置PPI为96。
- mac系统默认设置PPI为72
设计图中字体存在小数点
第一,设计师使用了px为单位进行设计,可能采用了大于72dpi的分辨率。而前端攻城狮,通常并不会对自己的PS做首选项设置(通俗的说,就是设计师的设计文件中,字体以px为单位,而攻城狮使用PS打开文件的时候,默认字体以pt为单位。是的,一定是你的“打开方式不对~~~”),当单位由px转成pt的时候,是有可能变成小数的。
第二,设计师以pt为单位进行设计,而前端将pt转成px时,会出现小数。
第三,如果设计师使用了Ctrl+T,对文字进行了缩放处理,会出现小数点
PhotoShop 首选项设置
本人使用的是 PhotoShop CC
-
选择菜单中的 首选项 -> 单位与标尺
将红色方框中的文字单位设置为像素。
。
参考
html5学堂-利利-揭秘PhotoShop中的点与像素
简书-阿树-前端工程师需要明白的像素
轻单-如何做跨DPI设计