天天看點

【原】移動web頁面使用字型的思考

回想2年前剛開始接觸手機項目,接到psd稿後,發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計,于是我寫頁面的時候也定義 font-family 為微軟雅黑,後來發到線上後,細心的産品經理發現頁面的字型不是微軟雅黑,要求馬上修改,我就驚呆了,還跟産品争執一番。

【原】移動web頁面使用字型的思考

後來了解到的手機系統 ios、android 等是不支援微軟雅黑字型,為了滿足産品的需要,保證視覺稿的還原度,手機端是如何定義微軟雅黑字型呢?

相信大家會想到 @font-face 定義為微軟雅黑字型并存放到 web 伺服器上,在需要使用時被自動下載下傳

【原】移動web頁面使用字型的思考
【原】移動web頁面使用字型的思考

雅黑字型問題雖然解決了,但也帶來了影響,一來消耗使用者的流量,二來對頁面的打開速度造成了延遲。

總感覺不好,為了說服産品經理,找了三大手機系統的字型資料: 

ios 系統

預設數字字型是helveticaneue

無微軟雅黑字型

android 系統

預設中文字型是droidsansfallback

預設英文和數字字型是droid sans

winphone 系統

預設中文字型是dengxian(方正等線體)

預設英文和數字字型是segoe

<a href="http://support.apple.com/kb/ht5878?viewlocale=zh_cn&amp;locale=en_us" target="_blank">附:ios7字型清單</a>

并做了個小測試,下圖為測試機 iphone 4s、三星 gt-n7000 android 2.3.6、htc windows phone 8.0 三種手機中的預設中文字型和英文字型展現:

【原】移動web頁面使用字型的思考

有關襯線字型和無襯線字型的差别,參考下圖:

【原】移動web頁面使用字型的思考

那麼,使用系統預設的字型所達到的視覺效果跟使用微軟雅黑字型沒有明顯的差别,權衡利弊,最終說服了産品經理放棄使用微軟雅黑的想法。

各個手機系統有自己的預設字型,且都不支援微軟雅黑

如無特殊需求,手機端無需定義中文字型,使用系統預設

英文字型和數字字型可使用 helvetica ,三種系統都支援

代碼:

一點思考,如有疑問,歡迎大家和我讨論。

作者:白樹

繼續閱讀