回想2年前剛開始接觸手機項目，接到PSD稿後，發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計，于是我寫頁面的時候也定義 font-family 為微軟雅黑，後來發到線上後，細心的産品經理發現頁面的字型不是微軟雅黑，要求馬上修改，我就驚呆了，還跟産品争執一番。
後來了解到的手機系統 ios、android 等是不支援微軟雅黑字型，為了滿足産品的需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字型呢？
相信大家會想到 @font-face 定義為微軟雅黑字型并存放到 web 伺服器上，在需要使用時被自動下載下傳
@font-face {
font-family: 'MicrosoftYaHei';
src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */
url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
} 有關 @font-face 的使用，大漠的這篇《CSS3 @font-face》有詳細的介紹。
雅黑字型問題雖然解決了，但也帶來了影響，一來消耗使用者的流量，二來對頁面的打開速度造成了延遲。
總感覺不好，為了說服産品經理，找了三大手機系統的字型資料：
ios 系統
- 預設中文字型是Heiti SC
- 預設英文字型是Helvetica
- 預設數字字型是HelveticaNeue
- 無微軟雅黑字型
android 系統
- 預設中文字型是Droidsansfallback
- 預設英文和數字字型是Droid Sans
winphone 系統
- 預設中文字型是Dengxian(方正等線體)
- 預設英文和數字字型是Segoe
附：ios7字型清單
并做了個小測試，下圖為測試機 iphone 4s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三種手機中的預設中文字型和英文字型展現：
我們可以看出三種不同的中文字型和微軟雅黑一樣是無襯線字型，有無襯線隻是一個小原因，而無論頁面中使用哪種字型，肉眼很難看出它們的差異，對産品的體驗幾乎沒有影響。
有關襯線字型和無襯線字型的差别，參考下圖：
那麼，使用系統預設的字型所達到的視覺效果跟使用微軟雅黑字型沒有明顯的差别，權衡利弊，最終說服了産品經理放棄使用微軟雅黑的想法。
結論
- 各個手機系統有自己的預設字型，且都不支援微軟雅黑
- 如無特殊需求，手機端無需定義中文字型，使用系統預設
- 英文字型和數字字型可使用 Helvetica ，三種系統都支援
代碼：
/* 移動端定義字型的代碼 */
body{font-family:Helvetica;} 一點思考，如有疑問，歡迎大家和我讨論。
作者：白樹
出處：http://peunzhang.cnblogs.com/
您覺得本文不錯，可打賞部落客，或點選右下角【好文要頂】支援部落客。
很多人在看的文章
《pageResponse - 讓H5适配移動裝置全家》
《移動web資源整理》
《移動web點5像素的秘密》
《移動web使用css3實作跑步》
《移動web頁面使用字型的思考》
《高清顯示屏原理及設計方案》
《css實作兩端對齊的3種方法》
我要贊個
我要評論
我要收藏
傳回頂部
跳到底部