前端高度还原设计稿（字体篇）
前言：
以前前端都是拿到psd设计图hao123，需要自己用ps切图，需要自己在psd上面一个个去量设计的大小和间距，而现在一般都是要求设计师把设计稿直接上传到蓝湖上面，通过蓝湖的标注来写出前端代码！下面我就前端如何根据蓝湖设计稿还原ui说下自己认识！
示例:
现在以下面一个注册页面为例！
尺寸：
先关注设计图是PC还是移动端，移动端看设计稿是以375px为标准还是以750px宽为标准的设计稿，上图是一个移动端375px宽的设计稿。
字体：
先从上图标题注册2个字可以写起！移到蓝湖最下面代码！
蓝湖代码
width: 36px;
height: 24px;
font-size: 17px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 24px;
html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>documenttitle>head><style> *{padding: 0;margin: 0;}style><body> <div class="header"> <div class="text">注册div> div> <style> .text{ width: 100%; text-align: center; font-size: 17px; font-weight: 400; color: #333333; } style>body>html>
可以看出自己代码移除了蓝湖标注的固定的宽度和高度，因为我们的内容往往是根据后台返回的内容,没有固定的内容!字体也一般采用系统自带的字体！把我们的代码在chrome浏览器中打开发现
1、
2、
可以看出我们的实现和ui设计稿有差异，设计稿注册2个字的高度是24px;而我们写出来的注册2个字的高度是22px比设计稿减少了2px;主要原因在于设计稿采用的是苹方字体。而我们写出来默认是微软雅黑字体！
关于字体：windows一般默认是微软雅黑字体。苹果电脑一般默认是苹方字体，安卓手机一般默认思源字体。因为我们的设计一般都是通过苹果电脑设计。所有一般设计出来一般都是苹方字体！
给上面class text加上
font-family: PingFangSC-Regular, PingFang SC;
发现浏览器渲染出来的还是微软雅黑字体。
查看系统字体：
我的电脑可以通过右键，个性化设置，找到字体选项！通过点开一个字体。发现字体源文件是在C:\Windows\Fonts;打开电脑的字体目录则可以找到当前电脑所支持的字体！
从上图中可以发现我的电脑不支持苹方字体。所以默认的展示的还是微软雅黑字体;
字体分类：
点开微软雅黑字体：发现里面还有3种字体：常规，粗体，细体！
对应蓝湖设计稿就是设计稿字体下面的自重，有时候我们会发现苹果自重是Medium，对应的是 Medium 苹方-简 中黑体 字体样式；
常见的苹方字体分类有：
Light 苹方-简 细体， Regular 苹方-简 常规体， 苹方-简 中粗体， Medium 苹方-简 中黑体， Bold 苹方-简 粗体
加载字体：
1、加载系统已有字体
font-family:'宋体';
这样就会发现字体就改成宋体；
2、加载外部字体
需要写下载字体文件；通过@font-face加载!
html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>documenttitle>head><style> *{padding: 0;margin: 0;}style><body> <div class="header"> <div class="text">注册div> div> <style> @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; } style>body>html>
我把在网上下载下来的苹方字体放置font目录下；通过font-face就可以加载！最后的效果就是
字体高度已经变成了24px;字体也是加载的系统没有的苹方字体！
外部字体加载优化
一般情况下，在字体文件加载完成之前，浏览器会使用备用字体来显示文字，这被称为FOIT（Flash of Text），然而貌似除了IE，其他浏览器都会等待3秒才展示系统字体，这样就会出现一个长达3秒的文字闪白现象，这种用户体验就很差了。
为了解决这种，CSS Fonts Module Level 3 中添加了一个 font-display 属性字体下载 微软雅黑粗体，这个属性可以让浏览器立即使用备用字体，在web字体加载完成之后立即替换字体下载 微软雅黑粗体，并重新渲染。
@font-face { font-family: 'family-name'; src: url('${url}'); font-display: swap;}
swap：如果设定的字体还未可用，浏览器将首先使用备用字体显示，当设定的字体加载完成后替换备用字体；
只加载使用的字体
字蛛
npm install font-spider
font-spider ./demo/*.html
通过字蛛生成的苹方字体文件才2kb;
最终方案
很多时候我们都很少加载外部字体前端高度还原设计稿（字体篇），这时候为了高度还原ui设计稿的字体效果我们可以选择;
1、写死字体的line-height;
line-height: 24px;
给注册的txt类加上line-height可以达到字体高度为24px的效果
2、给所有字体一个统一的字体大小与高度的比值；
对于苹方字体，我们发现30px字体大小的高度是42px;20px字体大小的高度是28px;
字体大小与字体高度有个比较规律的比值是1.4
在css中。我们可以定义
body{ font: 12px;line-height: 1.4;}
通过上面定义字体，就算不引入苹方字体。字体高度也能跟设计稿基本吻合！
【本文来源于互联网转载，如侵犯您的权益或不适传播，请邮件通知我们删除】