前言：

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

line-height: 24px;

復制代碼

給注冊的txt類加上line-height可以達到字體高度為24px的效果

2、給所有字體一個統一的字體大小與高度的比值；

對于蘋方字體，我們發現30px字體大小的高度是42px;20px字體大小的高度是28px;

字體大小與字體高度有個比較規律的比值是1.4

在css中。我們可以定義

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

復制代碼

通過上面定義字體，就算不引入蘋方字體。字體高度也能跟設計稿基本吻合！

總結

以上是生活随笔為你收集整理的html还原ui,前端高度还原设计稿（字体篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。