沒有看過面向前端的設計規範-文字初探-Part1的同學可能沒有上下文，我這邊簡單總結一下之前三點講的內容：
一、主字號：面向前端的設計規範推薦使用可以被2整除兩次的「 16px 」作為主字號；
二、字階：字號的增長如果符合一條曲線，可以讓專案更有一致性，也更讓人理解；
三、行高：面向前端的設計規範，建議「 行高 = 字號+8 」；
以上理論均屬於推導過程，沒有經過實踐印證。
四、實踐
在經過以上玄學的推導之後。最終的目的還是希望將其應用到我們實際的專案當中。我急忙趕在在我們設計的分享會以及前端的分享會上，去分享了以上純理論的推導過程。有趣的事情是，兩個組的同學反映出的重點完全不一樣。
設計的同學，更多給的反饋是在思考我整個的推導過程是否在設計角度具有合理性，比如有的設計師，提出其實行高的增長更應該符合一條遞增曲線。
前端的同學，更多的是在整個規範的可行性上有疑惑。他們比較擔心很多設計的臨界點如果覆蓋不了，那這套理論是不是就 run 不起來了。
我本身是一個前端，所以我也有可行性上的顧慮。於是，我拿著我們現有的設計稿，按照我的整個理論，做了一下設計的重構。
左邊是優化之前右邊是重構之後 「 灰色的背景是我寫的一個用來顯示設計稿的結構sketch外掛 」。解釋一下我這邊重構做的事情，我把所有的行高，高度，間距都用臨近的 4 的倍數的值做了替換。可以驚奇的看到，我們從「 3個下間距+3個行高 」 變成了我們 「 1個下間距 + 2個行高 」。可以看到僅僅在這麼小的一個模組中我們就可以省掉這麼多的變數，這對於前端來說是非常可喜的。
大家可能會覺得這樣的修改會不會對於設計稿視覺有特別大的衝擊。 下圖是我這邊去掉結構框之後的視覺對比：
可以明顯看到，這裡影響最大的部分是書封和大標題的間距靠近了「 這裡可以找設計師精進一下 」。而其它前端可喜的文字部分，我覺得影響是微乎其微的。
我把我們網站幾個主要頁面都做了這樣的重構，我發現其實對視覺的影響真的比我想象中少很多。而這個恰恰能夠證明這個看似玄學的推導其實是有一定可行性的。簡單來說，一個對視覺重構衝擊很小，但是卻能給前端帶來很大收益的理論「 面向前端的設計規範 」，是值得在專案中推廣的。
五、行高的二次思考
在我重構設計稿的時候，對於間距影響的行高問題，我其實還有另外的發現。
上圖可以看到，兩個完全視覺一樣的設計稿，對於設計師來說，把左邊的圖修改成右邊的圖就是修改一個行高的事。但是對於前端的同學來說，需要修改「 行高、上間距、下間距、高度 」這四個變數。
好玩兒的事是，即使設計師不給文字設定行高，對於設計來說幾乎是沒有影響的。簡單的來說，sketch 因為沒有網頁中流的概念，所以行高幾乎是不影響單行佈局的。然後更好玩兒的點來了，就是前端可以完全不按照設計給的行高去還原設計稿。
既然設計脫離了行高，那麼是不是可以讓設計直接就採用對於前端有利的行高規範呢？怎麼樣對前端有利呢？就是前端需要考慮的變數越少，對於前端就越有利。而這又回到了我們之前講的「 行高 = 字號 + 8 」這個結論。
你想按照這個結論就是 12px 的文字行高就是 20px ，24px 的文字行高就是 32px 了，而這讓我們的行高變成了一個常量，在我們網頁中高度幾乎和行高是一致的，所以我們的高度也變成了常量。回到剛才上一段那個例子，我們修改設計，就從之前要考慮的 4 個變數「 上間距，下間距，行高，高度 」變成了只需要考慮「 上間距和下間距 」這 2 個變數。而這對於前端來說修改的時間就幾乎減少了近1倍，而在最初測量的時候也相應的只需要測量上下間距就好，這又節約了時間。
雖然大多數情況設計師是不需要考慮行高的？但是一遇到文字換行的時候，設計師就需要考慮了。之前給設計分享，他們挑戰「 行高 = 字號 + 8 」這個結論的點是說，這個結論在某些字號下是好看的，但是並不能覆蓋到所有。
那麼問題來了，前端希望行高是一個常量，而設計又覺得「 行高 = 字號 + 8 」這個覆蓋面不夠。那怎麼辦呢？其實可以看到，我們前端的點是希望行高是一個常量，和是不是符合這個「 行高 = 字號 + 8 」公式本身無關。只是說符合這個公式的行高，一定是一個常量。
那麼問題就很好解決了，是不是可以讓設計師做到，每個字號都只對應一個行高呢「 至少在同一個字型下 」？而這個行高正好是這個字號下，這邊文字換行時最合適的行高。這樣我們即讓行高是一個常量，又覆蓋了所有的字號狀況。不管這個文字是單行還是多行，都能即迎合前端又符合設計。
也就說如果設計師給定，12px 的文字最合適的行高是 20px，那麼在這個專案中，12px 的文字不管在任何地方都一定是20px「同一個字型下」。
而這是我在二次對於行高的思考之後，給出的面向前端設計規範的建議：在一個專案中，同一個字型在任何一個地方，它的行高和它的字號都應該是一一對應且唯一的。
「github 文章地址」：github.com/ziven27/blo…