前端高度还原设计稿(字体篇)

前言:

以前前端都是拿到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;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></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,对应的是PingFang Medium 苹方-简 中黑体 字体样式;

常见的苹方字体分类有:

PingFang Light 苹方-简 细体,PingFang Regular 苹方-简 常规体,PingFang Semibold 苹方-简 中粗体,PingFang Medium 苹方-简 中黑体,PingFang Bold 苹方-简 粗体

加载字体:

1、加载系统已有字体

 font-family:'宋体';

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

2、加载外部字体

需要写下载字体文件;通过@font-face加载!

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></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 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;

line-height: 24px;

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

2、给所有字体一个统一的字体大小与高度的比值;

对于苹方字体,我们发现30px字体大小的高度是42px;20px字体大小的高度是28px;

字体大小与字体高度有个比较规律的比值是1.4

在css中。我们可以定义

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

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

原文链接:juejin.im

上一篇:一场电影时间,了解MVVM原理
下一篇:如何使用Proxy拦截Map和Set的操作

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    5 个月前
  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    7 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    7 个月前
  • 🎸 一篇文章搞懂前后端路由及前端路由的实现

    一、WEB 开发中的路由(以下简称路由)是指什么 路由简单来说根据网页 url 的改变来转发给对应控制器处理的应用程序,控制器就是我们俗称的Controller,一般是一个函数,所以路由也可以看作是u...

    3 个月前
  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两个方法都可以用来判断变量类型 区别:前者是判断这个变量是什么类型,后者是判断这个变量是不是某种类型,返...

    6 个月前
  • (本人)2019前端校招经历

    我是一个想要找前端工作的妹纸,最近电话面了挺多企业,在每次面试中都会发现自己的不足或者没涉及到的方面,一边被拒一边学习新知识。想要在这里记录、分享前端校招遇到的问题,希望每一次都有提升,下一次不会再犯...

    2 年前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    5 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    5 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前端的工作非常简单,仅仅只是将设计图还原,然后加上一些交互和...

    5 个月前
  • (初级前端)面试如何写出一个满意的深拷贝

    前言 已经有很多关于深拷贝与浅拷贝的文章,为什么自己还要写一遍呢💯 ❝ 学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。

    4 个月前

官方社区

扫码加入 JavaScript 社区