【原】设计稿中字体pt与px之间的转化

简介:

通常,设计网页时,字体一般会使用像素(px)或者倍数(em)。某一天开始重构页面,用PS打开设计师给过来的稿子,开始切图,在查看文字时,发现字体大小是用pt来设置的,⊙﹏⊙b汗,如下图:

为了解pt和px是如何转换的,百度后整理出来的资料如下:

px就是表示pixel,像素,是屏幕上显示数据的最基本的点;

pt就是point,是印刷行业常用单位,等于1/72英寸。

这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么?可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对长度”。

pt全称为point,但中文不叫“点”,查金山词霸可以看到,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准的长度单位,也称为“绝对长度”。

pixel是相对大小,而point是绝对大小

px是以屏幕象素为单位。

pt是以1/72英寸为单位

计算公式如下:

那么1px = 1pt * 图像分辨率/72 

此时我们可以把设计稿的每个pt单位换算为px,如果设计稿中的文字比较少,那还好计算,如果多呢?

其实不用那么麻烦,这里介绍一个简单的解决办法:

打开PS首选项——编辑,选择"单位与标尺",如下界面:

选择后出现如下界面,选择像素即可

这样就可以把设计稿中的pt单位转换为px了,清楚地看到页面文字的像素

作者:白树

出处:http://peunzhang.cnblogs.com/

目录
相关文章
RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(下)
RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(下)
188 0
|
6月前
|
移动开发 前端开发 容器
技术经验解读:代码:PC链接列表面板border的一种做法(每行之间有分割线)
技术经验解读:代码:PC链接列表面板border的一种做法(每行之间有分割线)
19 1
|
7月前
根据字符串内容、最大宽度和字体计算行宽和高度
根据字符串内容、最大宽度和字体计算行宽和高度
45 0
font-size: 0消除空白字符导致的行内元素额外间距
`font-size: 0` 设置字体大小为0,但是它要实现的效果却不是字体为0看不见,而是消除子行内元素间额外多余的空白。最推荐的方式是,去掉标签之间的空格、换行等空白字符,这也是压缩...
579 0
font-size: 0消除空白字符导致的行内元素额外间距
|
移动开发
【笔记】h5页面img标签变形,无法完美适配
h5页面img标签变形,无法完美适配
233 0
|
Java
剪裁NV21任意一部分的代码
剪裁NV21任意一部分的代码
125 0
|
iOS开发
使用AutoLayout约束, 为啥图片的大小(Image size)却还以实际大小显示?
问题 给一个 UIImageView 设置一张图片时,使用 AutoLayout 给 UIImageView 约束宽高,但是实际显示的大小,图片以实际的大小显示出来,代码也没有设置 frame,设置contentMode为UIViewContentModeScaleAspectFit 也不起作用。
1108 0
|
Java
java实现颜色Color对象和16进制之间的转换
package com.tsxs.test; import java.awt.Color; public class TestColor { public static void main(String[] args) { System.out.println(toHexFromColor(Color.BLUE)); System.out.println(toColorFro
5333 0
|
前端开发
web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置
web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置
web前端学习(二十一)——CSS3分组和嵌套选择器、尺寸属性(height、width)的相关设置
|
计算机视觉
qml开发笔记(附表一):qml可识别的color表:颜色--名称--RGB
qml开发笔记(附表一):qml可识别的color表:颜色--名称--RGB
qml开发笔记(附表一):qml可识别的color表:颜色--名称--RGB