字蛛的使用及說(shuō)明

Joonas 發(fā)布于2019-08-29 13:21 / 1481人閱讀

摘要：字蛛通過(guò)分析本地與文件獲取中沒(méi)有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式。如圖使用字蛛版本不建議過(guò)高，我使用的版本沒(méi)有成功，后來(lái)改成的版本成功了。

web字體體積大導(dǎo)致加載過(guò)慢，對(duì)于前端來(lái)說(shuō)是一大需要解決的問(wèn)題，作為一個(gè)前端小白，看不懂文檔也是個(gè)通病，不過(guò)還是花了一些時(shí)間和朋友一起研究了這個(gè)問(wèn)題，并找到了解決方案就是“字蛛”。

字蛛網(wǎng)站：http://font-spider.org
GitHub源碼：https://github.com/aui/font-s...

字蛛簡(jiǎn)介：

官方的說(shuō)法 "字蛛是一款中文字體壓縮器"。字蛛通過(guò)分析本地 CSS 與 HTML 文件
獲取 WebFont 中沒(méi)有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式。

字蛛的API：

GitHub中字蛛有4個(gè)API。
1. dest 壓縮多個(gè)HTML文件的WebFont:
    font-spider dest/*.html
2.--info 顯示網(wǎng)站上使用的WebFont：
    font-spider --info http://fontawesome.io
3.--ignore 忽略文件：
    font-spider --ignore “圖標(biāo) .css $ ” dest / * .html
4.--map 此參數(shù)將映射WebFont的聯(lián)機(jī)頁(yè)面到本地，然后壓縮（本地路徑必須是絕對(duì)路徑）：
    font-spider --map “ http://font-spider.org/font,/Website/font ” http://font-spider.org/index.html

看網(wǎng)站和GitHub還是比較清楚的，但是我看文檔比較費(fèi)勁，花了好久才搞明白，下面就說(shuō)一下使用流程和我碰到的一些需要注意的事項(xiàng)。

1. 首先按照官網(wǎng)說(shuō)的先安裝好NodeJS然后執(zhí)行：

npm install font-spider -g

安裝成功后，可以用"font-spider -V" 檢查一下是否安裝成功。

2. 在CSS中使用Webfont：

@font-face {
          font-family: "字體名稱(chēng)";
          src: url("../font/字體名稱(chēng).eot");
          src:
            url("../font/字體名稱(chēng).eot?#font-spider") format("embedded-opentype"),
            url("../font/字體名稱(chēng).woff2") format("woff2"),
            url("../font/字體名稱(chēng).woff") format("woff"),
            url("../font/字體名稱(chēng).ttf") format("truetype"),
            url("../font/字體名稱(chēng).svg") format("svg");
          font-weight: normal;
          font-style: normal;
        }
        //字體名稱(chēng)是自定義的，按自己的要求決定名字就可以了。

官網(wǎng)上的注意事項(xiàng)是兩條：

1. @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動(dòng)生成。
2. 開(kāi)發(fā)階段請(qǐng)使用相對(duì)路徑的 CSS 與 WebFont。

使用的時(shí)候把上面這一部分代碼直接復(fù)制就可以了。
特別需要注意的是：

1. 官網(wǎng)上的第一條注意事項(xiàng)，ttf格式是必須存在的，也就是ttf格式一定要按相對(duì)路徑找到文件才可以。
其他的一定都不要改動(dòng)，只把字體名字改成自定義的就可以了。（我當(dāng)時(shí)就改動(dòng)了其他的結(jié)果一直沒(méi)生效）
2. "../font/"改成自己的路徑建議與ttf格式字體的路徑一樣，
執(zhí)行完命令后會(huì)自動(dòng)備份原始的ttf格式，壓縮好其他格式將直接放在該路徑下。

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

在node.js command prompt中直接輸入需要壓縮的頁(yè)面 
font-spider ./demo/*.html

按照網(wǎng)頁(yè)的介紹來(lái)說(shuō)，進(jìn)行完這三步后，就會(huì)發(fā)現(xiàn)字體已經(jīng)壓縮好了，在正式使用前可以先利用demo嘗試一下。

按照開(kāi)發(fā)來(lái)說(shuō),一般我們會(huì)把 HTML 按不同的類(lèi)別分別放進(jìn)不同的文件夾，可我們?cè)趺茨芡瑫r(shí)爬取這些字呢，這時(shí)就可以利用font-spider在GitHub中給出的API "dest".

GitHub中有一個(gè)例子："font-spider dest/news.html dest/index.html dest/about.html"

從這個(gè)例子中我們可以發(fā)現(xiàn)，我們可以直接壓縮幾個(gè)頁(yè)面或文件夾的字體，但如果每次在項(xiàng)目布上線前我們都要寫(xiě)一大長(zhǎng)串不同的路徑和文件名字，這真是一件讓人頭疼的事情。

為了解決這個(gè)問(wèn)題,我們編寫(xiě)了一段bash腳本方便大家使用，只要在每次項(xiàng)目上線前寫(xiě)出HTML所在文件夾的路徑，這段腳本就會(huì)自動(dòng)遍歷出這個(gè)文件夾中所有的HTML文件，壓縮并執(zhí)行font-spider命令，從而直接對(duì)字體進(jìn)行生成。當(dāng)然同時(shí)如果文件夾內(nèi)還存在其他類(lèi)型的文件，本腳本也可以做到忽略其他文件，只遍歷HTML文件。

使用腳本的方法和其他需要注意的幾項(xiàng)：

1.使用前需要安裝bash，我使用的是Git Bash。
2.打開(kāi)腳本后會(huì)出現(xiàn)一句話 "please input build path:" ,然后寫(xiě)上你需要壓縮并執(zhí)行字蛛的文件夾路徑，
點(diǎn)擊回車(chē)命令就會(huì)執(zhí)行，執(zhí)行成功后窗口將自動(dòng)關(guān)閉。

如圖：

3.使用字蛛 nodeJs 版本不建議過(guò)高，我使用8.x的版本沒(méi)有成功，后來(lái)改成6.x的版本成功了。
看了其他人的文檔發(fā)現(xiàn)可能也跟npm有關(guān)，如果npm版本過(guò)高也是執(zhí)行不成功。
4.其他文檔中也說(shuō)字蛛使用有坑點(diǎn)，但本人使用中并未碰到，所以在這里就不再贅述了。

最后附上腳本的下載鏈接(上次的腳本有些問(wèn)題，現(xiàn)在已經(jīng)更改并測(cè)試沒(méi)有問(wèn)題)：http://pan.baidu.com/s/1kVf1b4z