作為一個有追求的Ui視覺設計師摆碉，我們常常在走查時面對程序員實現(xiàn)的設計頁面欲哭無淚！不知道哪里不對顾画，但是哪里都很別扭取劫，和我們精心設計的效果圖總有著微妙的差別，導致上線效果非常不盡人意研侣。
到底問題出在哪里呢谱邪？我們又應該如何和程序員溝通，以實現(xiàn)自己想要的效果庶诡？如果你不懂下面這些代碼知識惦银，你無法跟程序員溝通、無法實現(xiàn)你想要的效果末誓、更沒法提高設計師的話語權璧函。（搞不懂也沒事收藏起來隨時遇到問題看一下就好～）
一、不安裝字體包基显，實現(xiàn)特殊字體的相關代碼知識
現(xiàn)在特殊字體出現(xiàn)的越來越多蘸吓，大家都知道在app內(nèi)嵌入字體包即可實現(xiàn)，但是有時候我們需要在h5頁面中使用撩幽，或者我們只是少量使用库继，內(nèi)置字體包既增加了開發(fā)工作量又增加了安裝包大小，這時候就需要考慮不安裝字體包的方式實現(xiàn)特殊字體窜醉。
下面以數(shù)字字體為例講下相關知識宪萄，先來看下小桔整理的四種數(shù)字字體：
DINOT: APP內(nèi)常用內(nèi)置字體，在股票榨惰、理財拜英、科技類應用中使用最多；
DIN Alternate Bold: IOS琅催、MAC OS系統(tǒng)自帶字體居凶，“%”設計的與數(shù)字不太協(xié)調(diào)虫给；
WeChat Sans SS: 微信支付中使用的數(shù)字字體 (這是微信改進的數(shù)字字體，只有數(shù)字0-9 )侠碧；
DIN 30640 W04 Neuzeit GroteskBd：一款設計感更強的字體抹估，包含英文和符號；與微信支付弄兜、百度有錢花的數(shù)字字體相似（在國外網(wǎng)站需要付費才讓下載的字體药蜻，國內(nèi)字體網(wǎng)站沒有～）
百度網(wǎng)盤下載地址:https://pan.baidu.com/s/1JNmE5GLSFTo-OWUUPrX9Cw? ? 關注“小桔設計”微信公眾號內(nèi)回復 “密碼2”
實現(xiàn)特殊字體的方法有兩種：
① 使用系統(tǒng)自帶字體（僅限數(shù)字/英文字體）
DIN Alternate Bold 是IOS、MAC OS系統(tǒng)中自帶的字體替饿，在app语泽、h5中都可以直接指定使用該字體；（安卓系統(tǒng)沒有該字體视卢，故在安卓機上無效湿弦；安卓系統(tǒng)最接近的數(shù)字字體是：sans-serif-condensed;）
② 使用CSS3字體 “@fontface" 實現(xiàn)
原理是將字體文件存放到web服務器上，在需要時被自動下載到用戶設備上腾夯，設計師不需要理解，可直接把鏈接發(fā)給前端開發(fā)人員即可：http://www.w3school.com.cn/css3/css3_font.asp
也可給前端參考百度線上頁面: https://8.baidu.com/
(此法只適用于web和h5頁面蔬充，所有字體均可用該法實現(xiàn))
二蝶俱、 與app開發(fā)人員對接需要的相關字體代碼知識
① 安卓開發(fā)人員寫出來的字體加粗有時會特別粗，作為ui這時你只需要告訴開發(fā)人員：把加粗樣式寫在代碼內(nèi)即在代碼上加粗（設計師可以不用知道這句話到底是什么意思）饥漫；程序猿寫的加粗之所以會比正常的粗是因為他們：把加粗樣式寫在了配置上
② 安卓系統(tǒng)里英文和數(shù)字有中等加粗( 與IOS榨呆、MAC OS中web/h5實現(xiàn)中等加粗一樣都是用“font-weight: 500”實現(xiàn) )，中文沒有中等加粗庸队；
三积蜻、 Web/H5中字體顯示的基本原理
我們有時候會遇到這樣的情況，在一段采用黑體中文段落里出現(xiàn)宋體數(shù)字/英文彻消，就像下面這張圖
這段文字的字體代碼如下：
出現(xiàn)這種情況的原因竿拆，是因為前端在font-family的中文字體Pingfang SC前面加入了英文字體Times，由此得知系統(tǒng)選取字體順序的原則：優(yōu)先使用font-family中順序靠前的字體 (在中文段落中出現(xiàn)的數(shù)字和英文屬于于英文字體宾尚，避免上述情況的出現(xiàn)應該把英文字體要放在中文字體后面)
為了實現(xiàn)在蘋果電腦中顯示蘋方字體丙笋，在windows里顯示微軟雅黑，我給前端的全局字體順序通常是這樣的： font-family: "Pingfang SC", "Hiragino Sans GB", "Helvetica", "Droid Sans", "Microsoft YaHei", "Arial", "sans-serif";
Pingfang SC: MAC OS 和 IOS系統(tǒng)系統(tǒng)字體煌贴，最先顯示該字體御板；
Hiragino Sans GB: 蘋方出來之前蘋果系統(tǒng)的早期字體，考慮低版本OS系統(tǒng)中沒有蘋方字體的情況
Helvetica: 蘋果系統(tǒng)中的英文字體
Droid Sans: 安卓系統(tǒng)默認中文字體（并不是網(wǎng)傳的思源黑體哦）牛郑， 與Droid Sans Fallback的區(qū)別是怠肋，Droid Sans Fallback除了中文還兼容了日文、韓文
Microsoft Yahei：Windows系統(tǒng)字體
Arial: 蘋果和windows系統(tǒng)中都有的無襯線英文字體
Sans-serif: 無襯線字體（字體的種類非字體）淹朋，當前面所有字體都缺失時系統(tǒng)自動選用該類字體中的一種（這種情況極少發(fā)生）
如果設計師覺得蘋方和雅黑字體中的數(shù)字/英文不夠美觀笙各，想把中文里的數(shù)字/英文換成單獨的英文字體钉答，這時候就需要把英文字體放在中文字體前面（Helvetica放在Piangfang SC前面，把Arial放在Microsoft Yahei前面）
深度延展：
雖然上面的字體代碼適用于99%的情況酪惭，但由于大部分設計師的電腦都是既裝了蘋方又裝了雅黑希痴，這就會導致使用win設備設計師的瀏覽器中顯示蘋果系統(tǒng)字體，解決的辦法是告訴前端開發(fā)人員用JS判斷用戶操作系統(tǒng)春感，再根據(jù)操作系統(tǒng)顯示不同的CSS字體樣式砌创，小米、天貓鲫懒、百度等采取的就是這種方式（win系統(tǒng)中的CSS字體樣式里不寫入蘋方字體）
