使用font-spider[字蛛]對(duì)ttf文件進(jìn)行壓縮

原理：

字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式。

font-spirder 官網(wǎng)：http://font-spider.org/

第一步：先安裝好 NodeJS,然后執(zhí)行：

npm install font-spider -g

第二步：在CSS中使用WebFont:

/*聲明 WebFont*/ @font-face {font-family: 'pinghei';src: url('../font/pinghei.eot');src:url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),url('../font/pinghei.woff') format('woff'),url('../font/pinghei.ttf') format('truetype'),url('../font/pinghei.svg') format('svg');font-weight: normal;font-style: normal; }/*使用選擇器指定字體*/ .home h1, .demo > .test {font-family: 'pinghei'; }

1. @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動(dòng)生成

2. 開發(fā)階段請(qǐng)使用相對(duì)路徑的 CSS 與 WebFont

第三步：運(yùn)行font-spider命令：

font-spider ./demo/*.html
頁面依賴的字體將會(huì)自動(dòng)壓縮好，原 .ttf 字體會(huì)備份。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

使用結(jié)果如下：

?????

???? 1、使用BootStrap的 Glyphicons Halflings ,由45KB 壓縮至 2KB，而且生成.eot等文件；

?????????? 而自己加載的蘋方字體原來11M，壓縮后還是11M，未被壓縮，也未生成.eot等文件，效果并不理想。

????? 2、文件夾中多了一個(gè)存放壓縮前字體的 font-spider文件夾，對(duì)原字體進(jìn)行了備份。

總結(jié)

以上是生活随笔為你收集整理的web字体文件过大优化方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。