一個好的APP開發(fā)公司在解決加載速度時都有哪些方法?深圳APP開發(fā)公司資深程序員結(jié)合多年開發(fā)經(jīng)驗,在本文與各位分享怎樣解決APP頁面加載服務(wù)的。首先不濫用Web字體通過@font-face,可以在頁面上使用所希望顯示的任意字體。在@font-face的規(guī)則定義中,首先定義字體的名稱(例如colourFont),然后指定該字體的文件路徑。在需要使用該字體的HTML元素的樣式表中,通過font-family屬性來引用字體的名稱(即如前定義的colourFont)。
【代碼9-3】
01 @font- face { 02 font- family: global- iconfont; 03 src: url( iconfont. eot); 04 src: url( iconfont. eot?# iefix) format(" embedded- opentype"), url( iconfont. woff) format(" woff"), url( iconfont. ttf) format(" truetype"), url( iconfont. svg# uxiconfont) format(" svg") 05 } 06 .nav .iconfont { 07 font- family: global- iconfont; 08 font- size: 12px; 09 font- style: normal; 10 -webkit- font- smoothing: antialiased; 11 -moz- osx- font- smoothing: grayscaleFont type
12 }
從代碼第3~4行可以看出,src屬性分別引用了不同類型的字體文件。不同字體文件類型的瀏覽器支持情況如圖9.28所示。
@font-face的瀏覽器支持情況如圖9.29所示,可以參考http://caniuse.com/#search=font-face。
那么@font-face對頁面的性能有什么影響呢?首先,Web字體文件需要下載,下載完成后需要經(jīng)歷解析的過程,并重繪當(dāng)前頁面。
建議除非該字體對頁面是非常重要、必不可少的,否則不要使用@font-face。同時,在移動端還建議將字體文件轉(zhuǎn)換成base64格式,可以有效地減少http請求,例如:01 @font- face { 02 font- family: 'bottom- iconfont'; 03 src: url( data: application/ x- font- ttf; base64, AAEAAAAPAIAUARAAAAA==) format(' truetype');
04 } 05 .iconfont{ 06 font- family: "bottom- iconfont"; 07
好了,APP開發(fā)公司本文關(guān)于“一個好的APP開發(fā)公司在解決加載速度時都有哪些方法?”的相關(guān)APP制作知識就分享到這里,謝謝關(guān)注,博歐那網(wǎng)絡(luò)編輯整理。