問題:設(shè)計師通常喜歡用微軟雅黑進(jìn)行設(shè)計,但在移動端寫頁面定義微軟雅黑字體時痕鳍,實際顯示頁面字體并非微軟雅黑?
iso系統(tǒng)
android系統(tǒng)
- 默認(rèn)中文字體是Droidsansfallback
- 默認(rèn)英文和數(shù)字字體是Droid Sans
- 無微軟雅黑字體
winphone
- 默認(rèn)中文字體是Dengxian(方正等線體)
- 默認(rèn)英文和數(shù)字字體是Segoe
- 無微軟雅黑字體
三種手機(jī)系統(tǒng)默認(rèn)字體展示(肉眼難以看出差別龙巨,對產(chǎn)品體驗幾乎沒有影響)
對比.png
總結(jié):
1笼呆、三種系統(tǒng)均不支持微軟雅黑始腾;
?? 若需要可以使用font-face定義微軟雅黑并存放至服務(wù)器疮茄,在需要時自動下載女责,
?? 但是會消耗用戶流量剂桥,對頁面打開速度造成延遲
2袍镀、若無特殊需求裁厅,手機(jī)端無需定義 中文 字體枫匾,使用 系統(tǒng)默認(rèn)狭握;
3、英文和數(shù)字 可使用 Helvetica奥喻,三種系統(tǒng)均支持
拓展:如何自定義字體偶宫?
1、下載所需字體至本地环鲤。(字體下載網(wǎng)址推薦:Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type)
2纯趋、使用:
自定義字體.png
注:正常下載字體后并不是所有的字體格式都有,可以使用第三方工具轉(zhuǎn)換fontsquirrel
第三方轉(zhuǎn)換界面.png
下載后冷离,將相應(yīng)的字體格式解壓到一個新建的文件夾中吵冒,就可以在項目中定義使用啦,如:
字體存放文件夾.png
頁面使用.png
效果圖.png
友情提示:若項目是 英文網(wǎng)站西剥,有較多特殊字體效果痹栖,建議使用 font-face
?????若項目是 中文網(wǎng)站,建議使用 圖片
?????加載英文字體和圖片沒多大區(qū)別
?????加載中文字體太大了瞭空,會影響項目某些性能的優(yōu)化
本文是在移動端開發(fā)時遇到的問題揪阿,在網(wǎng)上搜索又再次的整理,參考文章:
https://www.cnblogs.com/mofish/p/4332937.html
https://www.w3cplus.com/content/css3-font-face