前端載入自定義字型及速度優化
今天是2.14情人節,也是另一個重要的日子,那就是我的第一個全棧專案上線啦~~~
這個是公司的官網,採用Python+Django做後端,前端也用了gulp自動化工作流,使用了前後端分離的開發方式,從年前弄到現在,雖然之後肯定還會有小的迭代和修改,一些輪播等效果還暫時處於display:none的狀態,但是終於可以算是第一版上線了!能適配主流瀏覽器的PC端和移動端,在做官網的過程中,真的學到了很多,之前學的東西都一個個記在部落格上了,今天來記一個新的問題,就是字型。
目前前端載入自定義字型越來越多了,我們的官網中也有這個需求,要改變一部分字型,這裡來記錄一下:
如何載入自定義字型?
CSS3中,使用@font-face即可載入自定義字型了。
推薦的跨瀏覽器 @font-face CSS 寫法:
/*宣告 WebFont*/
@font-face {
font-family: 'YourWebFontName';
src: url('../font/YourWebFontName.eot');
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype' ), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
/*使用選擇器指定字型*/
.home h1, .demo > .test {
font-family: 'YourWebFontName';
}
到目前為止都非常簡單,但是我引入之後,發現字型的載入非常緩慢,原來,中文字型由於文字數量龐大,所以字型檔案也非常之大,我的字型檔案就有4M,頁面載入之後,還需要很長的時間來下載字型,下載完成之後,才會正確顯示,在使用者看來,就是開啟頁面很久之後字型又變了,體驗非常不好。
字型檔案太大,載入慢,怎麼辦呢?
這時候就要github一下了,最終發現了一個神器:
簡單來說,font-spider的工作原理是這樣的: 中文字型檔案之所以很大,是因為英語只有26個字母,而中文的漢字有好多好多個,所以檔案相對來說就會大很多。font-spider就是從你的css檔案的@font-face入手,去查詢字型,然後遍歷你的html檔案,從css和html檔案中就可以找到那些你實際上使用的文字,取出這些文字之後,再將他們單獨變成字型檔案,這樣,就去掉了絕大部分其實用不到的文字,體積也會縮小很多很多。
看完之後發現這東西真是太棒了,趕緊來試試,由於我使用了gulp,就直接用相應的構建工具gulp-font-spider
如何使用 gulp-font-spider
第一步當然是安裝了:npm install gulp-font-spider --save-dev
接下來在gulpfile.js中,編寫任務:
//font任務,從app複製字型到dist
gulp.task('font', function() {
return gulp.src("app/fonts/**/*")
.pipe(plumber())
.pipe(gulp.dest("dist/static/fonts"))
.pipe(browserSync.stream());
});
// fontspider任務,在dist中壓縮字型檔案並替換。成功後會發現dist/fonts中的字型檔案比app/fonts中的小了很多
gulp.task('fontspider', function() {
return gulp.src('dist/*.html') //只要告訴它html檔案所在的資料夾就可以了,超方便
.pipe(fontSpider());
});
這兩個任務很簡單啦:
- font任務是把開發資料夾app裡邊的字型檔案複製到編譯之後的資料夾dist中。
- fontspider任務是把dist資料夾中的字型檔案,變為壓縮後的檔案。
顯然的,由於這倆任務的關係以及font-spider的工作原理,我們在編寫default任務的時候,記得一定要保證html,sass/css,font相關的任務執行完之後,再來執行fontspider任務,不然肯定會出錯的啦~
最後,簡單看看執行成功的樣子:
然後愉快的確認一下效果:
31/3951≈0.7846% 字型檔案縮小到了原來的0.7846%,小了不是一點點,棒棒噠!!!