設計師要懂這些程式碼知識（字型篇）！
作為一個有追求的Ui視覺設計師，我們常常在走查時面對程式設計師實現的設計頁面欲哭無淚！不知道哪裡不對，但是哪裡都很彆扭，和我們精心設計的效果圖總有著微妙的差別，導致上線效果非常不盡人意。
到底問題出在哪裡呢？我們又應該如何和程式設計師溝通，以實現自己想要的效果？如果你不懂下面這些程式碼知識，你無法跟程式設計師溝通、無法實現你想要的效果、更沒法提高設計師的話語權。（搞不懂也沒事收藏起來隨時遇到問題看一下就好～）
一、不安裝字型包，實現特殊字型的相關程式碼知識
現在特殊字型出現的越來越多，大家都知道在app內嵌入字型包即可實現，但是有時候我們需要在h5頁面中使用，或者我們只是少量使用，內建字型包既增加了開發工作量又增加了安裝包大小，這時候就需要考慮不安裝字型包的方式實現特殊字型。
下面以數字字型為例講下相關知識，先來看下小桔整理的四種數字字型：
DINOT : APP內常用內建字型，在股票、理財、科技類應用中使用最多；
DIN Alternate Bold : IOS、MAC OS系統自帶字型，“%”設計的與數字不太協調；
WeChat Sans SS : 微信支付中使用的數字字型 (這是微信改進的數字字型，只有數字0-9 )；
DIN 30640 W04 Neuzeit GroteskBd ：一款設計感更強的字型，包含英文和符號；與微信支付、百度有錢花的數字字型相似（在國外網站需要付費才讓下載的字型，國內字型網站沒有～）
百度網盤下載地址:https://pan.baidu.com/s/1JNmE5GLSFTo-OWUUPrX9Cw 密碼: “小桔設計”公眾號內回覆 “密碼2”
實現特殊字型的方法有兩種：
① 使用系統自帶字型（僅限數字/英文字型）
DIN Alternate Bold 是IOS、MAC OS系統中自帶的字型，在app、h5中都可以直接指定使用該字型；（安卓系統沒有該字型，故在安卓機上無效；安卓系統最接近的數字字型是：sans-serif-condensed;）
② 使用CSS3字型 “@fontface" 實現
原理是將字型檔案存放到web伺服器上，在需要時被自動下載到使用者裝置上，設計師不需要理解，可直接把連結發給前端開發人員即可：http://www.w3school.com.cn/css3/css3_font.asp
也可給前端參考百度線上頁面: https://8.baidu.com/
(此法只適用於web和h5頁面，所有字型均可用該法實現)
二、 與app開發人員對接需要的相關字型程式碼知識
① 安卓開發人員寫出來的字型加粗有時會特別粗，作為ui這時你只需要告訴開發人員：把加粗樣式寫在程式碼內即在程式碼上加粗（設計師可以不用知道這句話到底是什麼意思）；程式猿寫的加粗之所以會比正常的粗是因為他們：把加粗樣式寫在了配置上
② 安卓系統裡英文和數字有中等加粗( 與IOS、MAC OS中web/h5實現中等加粗一樣都是用“font-weight: 500”實現 )，中文沒有中等加粗；
三、 Web/H5中字型顯示的基本原理
我們有時候會遇到這樣的情況，在一段採用黑體中文段落裡出現宋體數字/英文，就像下面這張圖
這段文字的字型程式碼如下：
出現這種情況的原因，是因為前端在font-family的中文字型Pingfang SC前面加入了英文字型Times，由此得知系統選取字型順序的原則：優先使用font-family中順序靠前的字型 (在中文段落中出現的數字和英文屬於於英文字型，避免上述情況的出現應該把英文字型要放在中文字型後面)
為了實現在蘋果電腦中顯示蘋方字型，在windows裡顯示微軟雅黑，我給前端的全域性字型順序通常是這樣的： font-family: "Pingfang SC", "Hiragino Sans GB", "Helvetica", "Droid Sans", "Microsoft YaHei", "Arial", "sans-serif";
Pingfang SC : MAC OS 和 IOS系統系統字型，最先顯示該字型；
Hiragino Sans GB: 蘋方出來之前蘋果系統的早期字型，考慮低版本OS系統中沒有蘋方字型的情況
Helvetica : 蘋果系統中的英文字型
Droid Sans : 安卓系統預設中文字型（並不是網傳的思源黑體哦）， 與Droid Sans Fallback的區別是，Droid Sans Fallback除了中文還相容了日文、韓文
Microsoft Yahei ：Windows系統字型
Arial : 蘋果和windows系統中都有的無襯線英文字型
Sans-serif : 無襯線字型（字型的種類非字型），當前面所有字型都缺失時系統自動選用該類字型中的一種（這種情況極少發生）
如果設計師覺得蘋方和雅黑字型中的數字/英文不夠美觀，想把中文裡的數字/英文換成單獨的英文字型，這時候就需要把英文字型放在中文字型前面（Helvetica放在Piangfang SC前面，把Arial放在Microsoft Yahei前面）
深度延展：
雖然上面的字型程式碼適用於99%的情況，但由於大部分設計師的電腦都是既裝了蘋方又裝了雅黑，這就會導致使用win裝置設計師的瀏覽器中顯示蘋果系統字型，解決的辦法是告訴前端開發人員用JS判斷使用者作業系統，再根據作業系統顯示不同的CSS字型樣式，小米、天貓、百度等採取的就是這種方式（win系統中的CSS字型樣式裡不寫入蘋方字型）