[轉]移動端web頁面使用字體的思考

一直不知道手機端用的什麼字體，只是以爲相似雅黑，直到有一次設計師問到設計移動web頁面該用什麼字體才嚴肅地想起這個問題。

前人已栽樹，後人我就直接轉來吧……

 

回想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.六、HTC windows Phone 8.0 三種手機中的默認中文字體和英文字體展示：

咱們能夠看出三種不一樣的中文字體和微軟雅黑同樣是無襯線字體，有無襯線只是一個小緣由，而不管頁面中使用哪一種字體，肉眼很難看出它們的差別，對產品的體驗幾乎沒有影響。

有關襯線字體和無襯線字體的差異，參考下圖：

那麼，使用系統默認的字體所達到的視覺效果跟使用微軟雅黑字體沒有明顯的差異，權衡利弊，最終說服了產品經理放棄使用微軟雅黑的想法。

結論

• 各個手機系統有本身的默認字體，且都不支持微軟雅黑
• 如無特殊需求，手機端無需定義中文字體，使用系統默認
• 英文字體和數字字體可以使用 Helvetica ，三種系統都支持

代碼：

/* 移動端定義字體的代碼 */
body{font-family:Helvetica;}

　　

做者：白樹

出處：http://peunzhang.cnblogs.com/

 

ps:另外關於移動端的字體單位，rem是至關好用的，也給你們推薦一下，具體使用看這裏：http://ued.taobao.org/blog/2013/05/rem-font-size/