前端高度还原设计稿_前端 还原设计图 行高

以前前端都是拿到psd设计图，需要自己用ps切图，需要自己在psd上面一个个去量设计的大小和间距，而现在一般都是要求设计师把设计稿直接上传到蓝湖上面，通过蓝湖的标注来写出前端代码。要做到还原设计稿，主要要解决下面这三个问题：

• 元素大小
• 元素与元素之间的间距
• 元素在页面的位置
• 字体

元素大小

先关注设计图是PC还是移动端，移动端看设计稿是以375px为标准还是以750px宽为标准的设计稿，pc端基本上尺寸1440px，再来说下元素大小的问题，对于图片类的来说我们就要获取图片在蓝湖中的正确大小，这一般来说百分之八十都没什么问题，除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定；而对于文字来说，那就是文字大小了，但是还有个不能忽略的字体问题，同一个大小不同字体可能相差十万八千里。

总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型一致。

对于第一点为了准确性及效率，我们可以采用 Cutterman这个PS插件；而第二点我们就得使用规范去约定，约定网站常规字体类型及大小。

元素之间的间距

既然网站从视觉上表现出来的就是图片与文字，那么间距总体来说就是分为三种情况了：图片与图片的距离，图片与文字的距离，文字与文字的距离。

为了得到元素之间的间距，首先我们得有个工具来测量，当然蓝湖只需要鼠标选择其中一个元素，然后再选中另一个元素就可以查看间距了，PS默认提供了标尺这个工具来供我们测量，但是实际使用起来还是有点麻烦的，效率不怎么高，这里更推荐使用蓝湖。

事实上，视觉上的图片与图片的间距确实就是这么简单，但是换到有文字的时候这招就不怎么灵验了，因为文字还有个行高。而行高也是个很复杂的事。

所以如果要解决这个间距的问题，还得让设计师设计的时候就考虑到行高这一因素，然后你还要熟记常规行高的半行间距（半行间距不同浏览器还可能表现不一样），标记的尺寸再减去这个半行间距就是实际的间距。

总之这个问题（图片与文字的间距，文字与文字的间距）细究起来是非常令人抓狂的。

元素在页面的位置

这个相对于前面的来说应该是最简单的问题了，熟练运用各种布局技术一般就能解决百分之九十九的问题了，当然也还有些特别不合理的，那就需要改交互了。总之这个问题是可以通过技术来解决的问题，所以不是问题。

字体

先从注册2个字写起，移到蓝湖最下面代码

蓝湖代码

width: 36px;
height: 24px;
font-size: 17px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 24px;

1
2
3
4
5
6
7
8

可以看出自己代码移除了蓝湖标注的固定的宽度和高度，因为我们的内容往往是根据后台返回的内容,没有固定的内容!字体也一般采用系统自带的字体！把我们的代码在chrome浏览器中打开发现

可以看出我们的实现和设计稿有点差异，设计稿注册2个字的高度是24px，而我们写出来的注册2个字的高度是22px比设计稿减少了2px，主要原因在于设计稿采用的是苹方字体，而我们写出来默认是微软雅黑字体。

关于字体：windows一般默认是微软雅黑字体。苹果电脑一般默认是苹方字体，安卓手机一般默认思源字体。

给上面class text加上

font-family: PingFangSC-Regular, PingFang SC;
1

发现浏览器渲染出来的还是微软雅黑字体。

查看系统字体

电脑可以通过右键，个性化设置，找到字体选项！通过点开一个字体。发现字体源文件是在C:\Windows\Fonts;打开电脑的字体目录则可以找到当前电脑所支持的字体！

从上图中可以发现我的电脑不支持苹方字体。所以默认的展示的还是微软雅黑字体;

字体分类

点开微软雅黑字体：发现里面还有3种字体：常规，粗体，细体！

对应蓝湖设计稿就是设计稿字体下面的自重，有时候我们会发现苹果自重是Medium，对应的是PingFang Medium 苹方-简 中黑体 字体样式；
常见的苹方字体分类有：
PingFang Light 苹方-简 细体，
PingFang Regular 苹方-简 常规体，
PingFang Semibold 苹方-简 中粗体，
PingFang Medium 苹方-简 中黑体，
PingFang Bold 苹方-简 粗体

加载字体

1、加载系统已有字体

 font-family:'宋体';
1

这样就会发现字体就改成宋体；

2、加载外部字体
需要写下载字体文件；通过@font-face加载!

@font-face {        
font-family: "PingFang-Regular";        
src: url("./font/PingFang-Regular.ttf");        
}        
.text{            
width: 100%;            
text-align: center;            
font-size: 17px;            
font-family:'PingFang-Regular';            
font-weight: 400;            
color: #333;       
} 
1
2
3
4
5
6
7
8
9
10
11
12

我把在网上下载下来的苹方字体放置font目录下；通过font-face就可以加载！最后的效果就是

字体高度已经变成了24px;字体也是加载的系统没有的苹方字体！

外部字体加载优化

一般情况下，在字体文件加载完成之前，浏览器会使用备用字体来显示文字，这被称为FOIT（Flash of Unstyled Text），然而貌似除了IE，其他浏览器都会等待3秒才展示系统字体，这样就会出现一个长达3秒的文字闪白现象，这种用户体验就很差了。
为了解决这种，CSS Fonts Module Level 3 中添加了一个 font-display 属性，这个属性可以让浏览器立即使用备用字体，在web字体加载完成之后立即替换，并重新渲染。

@font-face {  font-family: 'family-name';  src: url('${url}');  font-display: swap;}
1

wap：如果设定的字体还未可用，浏览器将首先使用备用字体显示，当设定的字体加载完成后替换备用字体；

只加载使用的字体

npm install font-spider
font-spider ./demo/*.html
1
2

通过字蛛生成的苹方字体文件才2kb;
最终方案
很多时候我们都很少加载外部字体，这时候为了高度还原ui设计稿的字体效果我们可以选择;
1、写死字体的line-height;

line-height: 24px;
1

给注册的txt类加上line-height可以达到字体高度为24px的效果

2、给所有字体一个统一的字体大小与高度的比值；
对于苹方字体，我们发现30px字体大小的高度是42px;20px字体大小的高度是28px;
字体大小与字体高度有个比较规律的比值是1.4
在css中。我们可以定义

body{ font: 12px;line-height: 1.4;}
1

通过上面定义字体，就算不引入苹方字体。字体高度也能跟设计稿基本吻合