一直不清楚移動端web app和頁面用的什么字體，只是覺得類似微軟雅黑，直到有一次設計師問到設計移動web頁面該用什么字體才嚴肅地想起這個問題。

三大手機系統(tǒng)IOS、android、winphone支持的字體

ios 系統(tǒng)

默認中文字體是Heiti SC

默認英文字體是Helvetica

默認數(shù)字字體是HelveticaNeue

無微軟雅黑字體

android 系統(tǒng)

默認中文字體是Droidsansfallback

默認英文和數(shù)字字體是Droid Sans

無微軟雅黑字體

winphone 系統(tǒng)

默認中文字體是Dengxian(方正等線體)

默認英文和數(shù)字字體是Segoe

無微軟雅黑字體

回想2年前剛開始接觸手機項目，接到PSD稿后，發(fā)現(xiàn)視覺設計師們喜歡用微軟雅黑作為中文字體進行設計，于是在頁面中定義：

font-family：微軟雅黑

后來發(fā)到線上后，細心的產品經理發(fā)現(xiàn)頁面的字體不是微軟雅黑，要求馬上修改，我就驚呆了，還跟產品爭執(zhí)一番。

了解到的手機系統(tǒng) 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 */

}

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

是做了個小測試，下圖為三種系統(tǒng)手機中的默認中文字體和英文字體展現(xiàn)：

我們可以看出三種不同的中文字體和微軟雅黑一樣是無襯線字體，有無襯線只是一個小原因，而無論頁面中使用哪種字體，肉眼很難看出它們的差異，對產品的體驗幾乎沒有影響。

有關襯線字體和無襯線字體的差別，參考下圖：

那么，使用系統(tǒng)默認的字體所達到的視覺效果跟使用微軟雅黑字體沒有明顯的差別，權衡利弊，最終說服了產品經理放棄使用微軟雅黑的想法。

結論

各個手機系統(tǒng)有自己的默認字體，且都不支持微軟雅黑

如無特殊需求，手機端無需定義中文字體，使用系統(tǒng)默認

英文字體和數(shù)字字體可使用?Helvetica ，三種系統(tǒng)都支持

代碼：

/* 移動端定義字體的代碼 */

body{font-family:Helvetica;}

125jz網(wǎng)原創(chuàng)文章。發(fā)布者：江山如畫，轉載請注明出處：http://www.125jz.com/3452.html

總結

以上是生活随笔為你收集整理的android开发用什么字体,移动端web app和页面开发使用什么字体？微软雅黑？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。