今天是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%，小了不是一點點，棒棒噠！！！