設計師們通常喜歡用微軟雅黑作為中文字型進行設計，於是我寫頁面的時候也定義font-family為微軟雅黑，後來發到線上後，發現頁面的字型不是微軟雅黑，後來了解到的手機系統 ios、android 等是不支援微軟雅黑字型，為了滿足頁面需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字型呢？
字型問題雖然解決了，但也帶來了影響，一來消耗使用者的流量，二來對頁面的開啟速度造成了延遲。總感覺不好，隨後找了三大手機系統的字型資料：
預設中文字型是heiti sc
預設英文本型是helvetica
預設數字字型是helveticaneue
無微軟雅黑字型
預設中文字型是droidsansfallback
預設英文和數字字型是droid sans
無微軟雅黑字型
預設中文字型是dengxian(方正等線體)
預設英文和數字字型是segoe
無微軟雅黑字型
可以發現無論是ios、android還是wp系統中都是沒有微軟雅黑字型的，隨後做了乙個小測試，就是將微軟雅黑字型的效果和各個系統預設字型的效果做了一下對比，發現無論頁面中使用哪種字型，肉眼很難看出它們的差異，對產品的體驗幾乎沒有影響。
各個手機系統有自己的預設字型，且都不支援微軟雅黑。
如無特殊需求，手機端無需定義中文字型，使用系統預設。
英文本型和數字字型可使用 helvetica ，三種系統都支援。
pc 移動端 瀏覽器預設字型大小 16px 最小10px
mobile 移動端布局技巧
去掉a標籤或按鈕按下的高亮顏色 webkit tap highlight color rgba 0,0,0,0 文字處理 是否選中文字 user select none 處理文字超出容器 出現省略號 單行文字超出 出現省略號 text overflow ellipsis overflow hidde...
移動端字型
一直不知道手機端用的什麼字型，只是覺得類似雅黑，直到有一次設計師問到設計移動web頁面該用什麼字型才嚴肅地想起這個問題。前人已栽樹，後人我就直接轉來吧 回想2年前剛開始接觸手機專案，接到psd稿後，發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計，於是我寫頁面的時候也定義 font family ...
移動端定義字型
後來了解到的手機系統 ios android 等是不支援微軟雅黑字型，為了滿足產品的需要，保證視覺稿的還原度，手機端是如何定義微軟雅黑字型呢？1 2 3 4 5 6 7 8 font face 有關 font face 的使用，大漠的這篇 css3 font face 有詳細的介紹。雅黑字型問題雖然...