html还原ui,前端高度还原设计稿（字体篇）
前言：
以前前端都是拿到psd設(shè)計圖，需要自己用ps切圖，需要自己在psd上面一個個去量設(shè)計的大小和間距，而現(xiàn)在一般都是要求設(shè)計師把設(shè)計稿直接上傳到藍(lán)湖上面，通過藍(lán)湖的標(biāo)注來寫出前端代碼！下面我就前端如何根據(jù)藍(lán)湖設(shè)計稿還原ui說下自己認(rèn)識！
示例:
現(xiàn)在以下面一個注冊頁面為例！
尺寸：
先關(guān)注設(shè)計圖是PC還是移動端，移動端看設(shè)計稿是以375px為標(biāo)準(zhǔn)還是以750px寬為標(biāo)準(zhǔn)的設(shè)計稿，上圖是一個移動端375px寬的設(shè)計稿。
字體：
先從上圖標(biāo)題注冊2個字可以寫起！移到藍(lán)湖最下面代碼！
藍(lán)湖代碼
width: 36px;
height: 24px;
font-size: 17px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 24px;
Document 注冊復(fù)制代碼
可以看出自己代碼移除了藍(lán)湖標(biāo)注的固定的寬度和高度，因為我們的內(nèi)容往往是根據(jù)后臺返回的內(nèi)容,沒有固定的內(nèi)容!字體也一般采用系統(tǒng)自帶的字體！把我們的代碼在chrome瀏覽器中打開發(fā)現(xiàn)
1、
2、
可以看出我們的實現(xiàn)和ui設(shè)計稿有差異，設(shè)計稿注冊2個字的高度是24px;而我們寫出來的注冊2個字的高度是22px比設(shè)計稿減少了2px;主要原因在于設(shè)計稿采用的是蘋方字體。而我們寫出來默認(rèn)是微軟雅黑字體！
關(guān)于字體：windows一般默認(rèn)是微軟雅黑字體。蘋果電腦一般默認(rèn)是蘋方字體，安卓手機一般默認(rèn)思源字體。因為我們的設(shè)計一般都是通過蘋果電腦設(shè)計。所有一般設(shè)計出來一般都是蘋方字體！
給上面class text加上
font-family: PingFangSC-Regular, PingFang SC;
復(fù)制代碼
發(fā)現(xiàn)瀏覽器渲染出來的還是微軟雅黑字體。
查看系統(tǒng)字體：
我的電腦可以通過右鍵，個性化設(shè)置，找到字體選項！通過點開一個字體。發(fā)現(xiàn)字體源文件是在C:\Windows\Fonts;打開電腦的字體目錄則可以找到當(dāng)前電腦所支持的字體！
從上圖中可以發(fā)現(xiàn)我的電腦不支持蘋方字體。所以默認(rèn)的展示的還是微軟雅黑字體;
字體分類：
點開微軟雅黑字體：發(fā)現(xiàn)里面還有3種字體：常規(guī)，粗體，細(xì)體！
對應(yīng)藍(lán)湖設(shè)計稿就是設(shè)計稿字體下面的自重，有時候我們會發(fā)現(xiàn)蘋果自重是Medium，對應(yīng)的是PingFang Medium 蘋方-簡 中黑體 字體樣式；
常見的蘋方字體分類有：
PingFang Light 蘋方-簡 細(xì)體，PingFang Regular 蘋方-簡 常規(guī)體，PingFang Semibold 蘋方-簡 中粗體，PingFang Medium 蘋方-簡 中黑體，PingFang Bold 蘋方-簡 粗體
加載字體：
1、加載系統(tǒng)已有字體
font-family:'宋體';
復(fù)制代碼
這樣就會發(fā)現(xiàn)字體就改成宋體；
2、加載外部字體
需要寫下載字體文件；通過@font-face加載!
Document 注冊復(fù)制代碼
我把在網(wǎng)上下載下來的蘋方字體放置font目錄下；通過font-face就可以加載！最后的效果就是
字體高度已經(jīng)變成了24px;字體也是加載的系統(tǒng)沒有的蘋方字體！
外部字體加載優(yōu)化
一般情況下，在字體文件加載完成之前，瀏覽器會使用備用字體來顯示文字，這被稱為FOIT(Flash of Unstyled Text)，然而貌似除了IE，其他瀏覽器都會等待3秒才展示系統(tǒng)字體，這樣就會出現(xiàn)一個長達(dá)3秒的文字閃白現(xiàn)象，這種用戶體驗就很差了。
為了解決這種，CSS Fonts Module Level 3 中添加了一個 font-display 屬性，這個屬性可以讓瀏覽器立即使用備用字體，在web字體加載完成之后立即替換，并重新渲染。
@font-face { font-family: 'family-name'; src: url('${url}'); font-display: swap;}
復(fù)制代碼
swap：如果設(shè)定的字體還未可用，瀏覽器將首先使用備用字體顯示，當(dāng)設(shè)定的字體加載完成后替換備用字體；
只加載使用的字體
npm install font-spider
font-spider ./demo/*.html
復(fù)制代碼
通過字蛛生成的蘋方字體文件才2kb;
最終方案
很多時候我們都很少加載外部字體，這時候為了高度還原ui設(shè)計稿的字體效果我們可以選擇;
1、寫死字體的line-height;
line-height: 24px;
復(fù)制代碼
給注冊的txt類加上line-height可以達(dá)到字體高度為24px的效果
2、給所有字體一個統(tǒng)一的字體大小與高度的比值；
對于蘋方字體，我們發(fā)現(xiàn)30px字體大小的高度是42px;20px字體大小的高度是28px;
字體大小與字體高度有個比較規(guī)律的比值是1.4
在css中。我們可以定義
body{ font: 12px;line-height: 1.4;}
復(fù)制代碼
通過上面定義字體，就算不引入蘋方字體。字體高度也能跟設(shè)計稿基本吻合！
總結(jié)
以上是生活随笔為你收集整理的html还原ui,前端高度还原设计稿（字体篇）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html默认下面,阅读下面配置web默认
- 下一篇： jenkins组权限_JENKINS针对