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;
line-height: 24px;
復制代碼
給注冊的txt類加上line-height可以達到字體高度為24px的效果
2、給所有字體一個統一的字體大小與高度的比值；
對于蘋方字體，我們發現30px字體大小的高度是42px;20px字體大小的高度是28px;
字體大小與字體高度有個比較規律的比值是1.4
在css中。我們可以定義
body{ font: 12px;line-height: 1.4;}
復制代碼
通過上面定義字體，就算不引入蘋方字體。字體高度也能跟設計稿基本吻合！
總結
以上是生活随笔為你收集整理的html还原ui,前端高度还原设计稿（字体篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html默认下面,阅读下面配置web默认
- 下一篇： jenkins组权限_JENKINS针对