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

標籤：

前言

記得做PC端頁面的時候，字型一般設定為微軟雅黑，現在做起移動端頁面來了，設計師們一般都還把字型設定為微軟雅黑字型，但是做出來後，測試的時候發現頁面中的字型不是微軟雅黑，怎麼辦？

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

@font-face的使用

@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://www.cnblogs.com/PeunZhang/p/3592096.html

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