一直不知道手機端用的什麼字型，只是覺得類似雅黑，直到有一次設計師問到設計移動web頁面該用什麼字型才嚴肅地想起這個問題。
前人已栽樹，後人我就直接轉來吧……
回想2年前剛開始接觸手機專案，接到psd稿後，發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計，於是我寫頁面的時候也定義 font-family 為微軟雅黑，後來發到線上後，細心的產品經理發現頁面的字型不是微軟雅黑，要求馬上修改，我就驚呆了，還跟產品爭執一番。
後來了解到的手機系統 ios、android 等是不支援微軟雅黑字型，為了滿足產品的需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字型呢？12
3456
78@font-face
有關 @font-face 的使用，大漠的這篇《css3 @font-face》有詳細的介紹。
雅黑字型問題雖然解決了，但也帶來了影響，一來消耗使用者的流量，二來對頁面的開啟速度造成了延遲。
總感覺不好，為了說服產品經理，找了三大手機系統的字型資料：
ios 系統
android 系統
winphone 系統
並做了個小測試，下圖為測試機 iphone 4s、三星 gt-n7000 android 2.3.6、htc windows phone 8.0 三種手機中的預設中文字型和英文本型展現：
我們可以看出三種不同的中文字型和微軟雅黑一樣是無襯線字型，有無襯線只是乙個小原因，而無論頁面中使用哪種字型，肉眼很難看出它們的差異，對產品的體驗幾乎沒有影響。
那麼，使用系統預設的字型所達到的視覺效果跟使用微軟雅黑字型沒有明顯的差別，權衡利弊，最終說服了產品經理放棄使用微軟雅黑的想法。
**：1
2/* 移動端定義字型的** */
body
出處：ps:另外關於移動端的字型單位，rem是相當好用的，也給大家推薦一下，具體使用看這裡：
一直不知道手機端用的什麼字型，只是覺得類似雅黑，直到有一次設計師問到設計移動web頁面該用什麼字型才嚴肅地想起這個問題。
前人已栽樹，後人我就直接轉來吧……
回想2年前剛開始接觸手機專案，接到psd稿後，發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計，於是我寫頁面的時候也定義 font-family 為微軟雅黑，後來發到線上後，細心的產品經理發現頁面的字型不是微軟雅黑，要求馬上修改，我就驚呆了，還跟產品爭執一番。
後來了解到的手機系統 ios、android 等是不支援微軟雅黑字型，為了滿足產品的需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字型呢？12
3456
78@font-face
有關 @font-face 的使用，大漠的這篇《css3 @font-face》有詳細的介紹。
雅黑字型問題雖然解決了，但也帶來了影響，一來消耗使用者的流量，二來對頁面的開啟速度造成了延遲。
總感覺不好，為了說服產品經理，找了三大手機系統的字型資料：
ios 系統
android 系統
winphone 系統
並做了個小測試，下圖為測試機 iphone 4s、三星 gt-n7000 android 2.3.6、htc windows phone 8.0 三種手機中的預設中文字型和英文本型展現：
我們可以看出三種不同的中文字型和微軟雅黑一樣是無襯線字型，有無襯線只是乙個小原因，而無論頁面中使用哪種字型，肉眼很難看出它們的差異，對產品的體驗幾乎沒有影響。
那麼，使用系統預設的字型所達到的視覺效果跟使用微軟雅黑字型沒有明顯的差別，權衡利弊，最終說服了產品經理放棄使用微軟雅黑的想法。
**：1
2/* 移動端定義字型的** */
body
出處：ps:另外關於移動端的字型單位，rem是相當好用的，也給大家推薦一下，具體使用看這裡：
移動端定義字型
後來了解到的手機系統 ios android 等是不支援微軟雅黑字型，為了滿足產品的需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字型呢？1 2 3 4 5 6 7 8 font face 有關 font face 的使用，大漠的這篇 css3 font face 有詳細的介紹。雅黑字型問題雖然...
mobile 移動端字型
設計師們通常喜歡用微軟雅黑作為中文字型進行設計，於是我寫頁面的時候也定義font family為微軟雅黑，後來發到線上後，發現頁面的字型不是微軟雅黑，後來了解到的手機系統 ios android 等是不支援微軟雅黑字型，為了滿足頁面需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字型呢？字型問題雖...
移動端字型設定
body ios 4.0 ios 9以下系統已經非常少 使用英文本型 helvetica neue，之前的ios版本降級使用 helvetica。中文字型設定為華文黑體stheiti。微軟雅黑是為了相容win系統，畢竟視網膜解析度的win系統用simsun是非常醜陋的，可以用4k屏 windows ...