網站使用自定義字體導致打開很慢


今天偶爾看到一個網頁打開首頁一分鍾竟然還沒有出來!!!

這還了得,做IT就是強迫症多,非得看看是什么原因,不用說F12跑一圈!!

查找原因,是ttf字體庫導致的,一看14M,OMG!!

繼續查看源代碼分析如下:

百度google,終於發現了一好辦法【字蛛】,感覺不錯,文件可以瞬間小很多,其實原理我覺得很簡單,英文就26個字母,中國漢字那么多,字體文件肯定 會很大,

-------------------------------華麗的分割線————————————————————

【字蛛】只不過是把你頁面上要用的漢字都給提取出來重新生成一個新的字體文件,顯然會很小,廢話不多說,接下來上步驟:
1、【安裝nodeJs】
這步我就不多說了,不是本文的重點,大家可以找度娘,一堆
這里要注意的事需要用到npm安裝,
用淘寶鏡像,命令如下:

首先打開nodejs客戶端

輸入一下命令:

npm config set registry http://registry.npm.taobao.org

npm info underscore (如果上面配置正確這個命令會有字符串response)

命令行指定
npm –registry http://registry.cnpmjs.org info underscore

這樣一來速度會快很多了

2、【安裝字蛛】
輸入命令
npm install font-spider -g
會看到一堆警告,沒關系,到最后會出現如下顯示

說明成功了

3、【運行】
安裝成功之后就開始壓縮了

我的目錄是這樣的

我的css文件是開頭是這樣的

這里要確保ttf文件一定要有,其他的不管

在你的html中也引用了相應的css文件

接下來就是最后一步了 生成新的字體庫

nodejs 命令行輸入
font-spider C:\Users\wangchao\Desktop\index*.html
也就是你的html完整路徑 【*】 是通配符,表示會掃描所有的html文件
然后回車

這樣就成功了,在你原來的字體文件目錄下會多出相應的壓縮之后的字體文件,發現小了很多吧
然后你再引用相關的新的字體文件就行了。個別內容來自互聯網


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM