html还原ui，前端⾼度还原设计稿（字体篇）
前⾔：
以前前端都是拿到psd设计图，需要⾃⼰⽤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;
Document
注册
复制代码
可以看出⾃⼰代码移除了蓝湖标注的固定的宽度和⾼度，因为我们的内容往往是根据后台返回的内容，没有固定的内容!字体也⼀般采⽤系统⾃带的字体！把我们的代码在chrome浏览器中打开发现
1、
2、
可以看出我们的实现和ui设计稿有差异，设计稿注册2个字的⾼度是24px;⽽我们写出来的注册2个字的⾼度是22px⽐设计稿减少了2px；主要原因在于设计稿采⽤的是苹⽅字体。⽽我们写出来默认是微软雅⿊字体！
关于字体：windows⼀般默认是微软雅⿊字体。苹果电脑⼀般默认是苹⽅字体，安卓⼿机⼀般默认思源字体。因为我们的设计⼀般都是通过苹果电脑设计。所有⼀般设计出来⼀般都是苹⽅字体！
给上⾯class text加上
font-family: PingFangSC-Regular, PingFang SC;
复制代码
发现浏览器渲染出来的还是微软雅⿊字体。
查看系统字体：
我的电脑可以通过右键，个性化设置，到字体选项！通过点开⼀个字体。发现字体源⽂件是在C:\Windows\Fonts；打开电脑的字体⽬录则可以到当前电脑所⽀持的字体！
从上图中可以发现我的电脑不⽀持苹⽅字体。所以默认的展⽰的还是微软雅⿊字体;
字体分类：
点开微软雅⿊字体：发现⾥⾯还有3种字体：常规，粗体，细体！
对应蓝湖设计稿就是设计稿字体下⾯的⾃重，有时候我们会发现苹果⾃重是Medium，对应的是PingFang Medium 苹⽅-简 中⿊体 字体样式；
常见的苹⽅字体分类有：
PingFang Light 苹⽅-简 细体，PingFang Regular 苹⽅-简 常规体，PingFang Semibold 苹⽅-简 中粗体，PingFang Medium 苹⽅-简中⿊体，PingFang Bold 苹⽅-简 粗体
加载字体：
1、加载系统已有字体
font-family:'宋体';
复制代码
这样就会发现字体就改成宋体；
2、加载外部字体
需要写下载字体⽂件；通过@font-face加载!
Document
注册
复制代码
我把在⽹上下载下来的苹⽅字体放置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;}
复制代码
swap：如果设定的字体还未可⽤，浏览器将⾸先使⽤备⽤字体显⽰，当设定的字体加载完成后替换备⽤字体；
只加载使⽤的字体
npm install font-spider
font-spider ./demo/*.html
复制代码
通过字蛛⽣成的苹⽅字体⽂件才2kb;
最终⽅案
很多时候我们都很少加载外部字体，这时候为了⾼度还原ui设计稿的字体效果我们可以选择;
1、写死字体的line-height;
ps切图尺寸变小line-height: 24px;
复制代码
给注册的txt类加上line-height可以达到字体⾼度为24px的效果
2、给所有字体⼀个统⼀的字体⼤⼩与⾼度的⽐值；
对于苹⽅字体，我们发现30px字体⼤⼩的⾼度是42px;20px字体⼤⼩的⾼度是28px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。