移動端頁面應該使用什麽字體？
設計師們通常喜歡用微軟雅黑作為中文字體進行設計，於是我寫頁面的時候也定義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 */
}
字體問題雖然解決了，但也帶來了影響，一來消耗用戶的流量，二來對頁面的打開速度造成了延遲。總感覺不好，隨後找了三大手機系統的字體資料：
ios 系統
-
默認中文字體是Heiti SC
-
默認英文字體是Helvetica
-
默認數字字體是HelveticaNeue
-
無微軟雅黑字體
android 系統
-
默認中文字體是Droidsansfallback
-
默認英文和數字字體是Droid Sans
-
無微軟雅黑字體
winphone 系統
-
默認中文字體是Dengxian(方正等線體)
-
默認英文和數字字體是Segoe
-
無微軟雅黑字體
可以發現無論是ios、android還是wp系統中都是沒有微軟雅黑字體的，隨後做了一個小測試，就是將微軟雅黑字體的效果和各個系統默認字體的效果做了一下對比，發現無論頁面中使用哪種字體，肉眼很難看出它們的差異，對產品的體驗幾乎沒有影響。
結論：
-
各個手機系統有自己的默認字體，且都不支持微軟雅黑。
-
如無特殊需求，手機端無需定義中文字體，使用系統默認。
-
英文字體和數字字體可使用 Helvetica ，三種系統都支持。
移動端頁面應該使用什麽字體？