010年到1010年,還不清楚手機webapp和頁面使用了什么字體,但和微軟雅黑差不多。直到有一位設(shè)計師問設(shè)計手機網(wǎng)頁應(yīng)該用什么字體,他才認真思考這個問題。安卓,收到PSD草稿后,發(fā)現(xiàn)視覺設(shè)計師喜歡用微軟雅黑作為中文字體來設(shè)計,于是他們在頁面中定義:
字體系列:微軟雅黑
后來在網(wǎng)上發(fā)布后,細心的產(chǎn)品經(jīng)理發(fā)現(xiàn)頁面的字體不是微軟雅黑,要求立即修改。我很震驚,和產(chǎn)品發(fā)生了爭執(zhí)。安卓不支持微軟雅黑字體。為了滿足產(chǎn)品的需求,保證視覺手稿的還原度,需要時會自動下載。iefix ')格式(' embedded-opentype '),/*IE6-IE8*/
url('MicrosoftYaHei.woff ')格式(' woff '),/*ModernBrowsers*/
url('MicrosoftYaHei.ttf ')格式(' truetype '),/*Safari,安卓,iOS*/
URL(' microsoftyahei . svgmicrosoftyhei ')格式(' SVG ');/*LegacyiOS*/
}
雅黑字體的問題雖然得到了解決,但也帶來了一些影響,比如消耗用戶流量,延遲頁面打開速度。
我做了一點測試,但是有沒有襯線只是一個小原因,無論頁面使用哪種字體,肉眼都很難看出兩者的區(qū)別,對產(chǎn)品的體驗影響不大。
關(guān)于襯線字體和無襯線字體的區(qū)別,請參考下圖:
那么,使用默認字體和使用微軟雅黑字體在視覺效果上沒有明顯的區(qū)別。權(quán)衡利弊后,終說服產(chǎn)品經(jīng)理放棄使用微軟雅黑的想法。而且他們都不支持微軟雅黑
如果沒有特殊要求,使用系統(tǒng)默認值
Helvetica可以用于英語字體和數(shù)字字體,這三種系統(tǒng)都支持
代碼:
/*在移動終端上定義字體的代碼*/
正文{ font-family : Helvetica;}
125jz原創(chuàng)文章。出版者:風(fēng)景如畫,