官網(wǎng)網(wǎng)址為http://font-spider.org/

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

運(yùn)行該程序，電腦需要先下載node應(yīng)用程序，下載node步驟很簡(jiǎn)單，找到安裝程序（nodejs百度云盤分享地址），按提示下一步下一步。。。最后安裝完成

下載字蛛，全局安裝

npm install font-spider -g

安裝完畢，檢查是否安裝成功可以，font-spider? -V，查看版本，顯示如下說明安裝成功

特別注意的是，字蛛查看版本的命令一定要是大寫的V

使用字蛛

在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'; }

官方提醒注意事項(xiàng)：

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

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

運(yùn)行 font-spider 命令

font-spider ./demo/*.html

———————————————————————————————————————————————————————-—

舉例說明如下：

運(yùn)行成功后你會(huì)發(fā)現(xiàn)，font文件夾會(huì)把你之前的很大的ttf文件備份在新生成的.font-spider文件夾下，在font文件夾下生成好幾個(gè)壓縮的很小的字體文件，可自行查看文件大小。如圖：

注意：我第一次測(cè)試一直也沒有成功，也沒有任何報(bào)錯(cuò)，我懷疑是之前運(yùn)行的代碼有緩存，第二次運(yùn)行一下就成功了，所以如果沒有任何報(bào)錯(cuò)的前提下沒有成功，建議多建幾個(gè)案例嘗試下！

總結(jié)

以上是生活随笔為你收集整理的字蛛的用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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