字蛛是什么渤愁？
字蛛是一個中文字體壓縮器
字體優(yōu)化前后對比圖
1缰揪、使用前字體包總共大小60.6MB
使用字蛛前.png
文件夾大小.png
2眨业、使用前字體包總共大小13.4MB
使用字蛛后.png
文件夾大小.png
為什么要使用字蛛竹握？
由于中文的字體體積太大画株，一般都是幾M以上。英文字體文字部分由26個字母組成啦辐，所以字體文件通常不會太大谓传；而中文漢字?jǐn)?shù)量總共約有九萬左右， 國標(biāo)(GB)字庫 有6763字, 而根據(jù)《現(xiàn)代漢語常用字表》統(tǒng)計數(shù)據(jù)芹关，常用漢字也要有3500個左右续挟。 中文字體文件通常都會幾M的大小，參照現(xiàn)在中國的網(wǎng)絡(luò)環(huán)境侥衬，顯然不適合在項目中使用诗祸。
字蛛的來源及工作原理
官網(wǎng)：http://font-spider.org/
github源碼：github.com/aui/font-spider
字蛛官網(wǎng).png
原理:
1.爬行本地 html 文檔跑芳，分析所有 css 語句
2.記錄@font-face語句聲明的字體，并且記錄使用該字體的 css 選擇器
3.通過 css 選擇器的規(guī)則查找當(dāng)前 html 文檔的節(jié)點直颅，記錄節(jié)點上的文本
4.找到字體文件并刪除沒被使用的字符
5.編碼成跨平臺使用的字體格式
簡而言之：就是爬出你項目中所使用的文字保留起來博个，刪除沒被使用到的文字，并重新打包功偿。
該如何使用字蛛盆佣？
一、安裝node.js
如果沒有node械荷，請安裝安裝node.js（這里不做詳細(xì)介紹罪塔，可自行百度）。如果已經(jīng)安裝請看下一步养葵。
二征堪、安裝字蛛
有vscode編輯器的可以在項目文件夾中打開終端，輸入npm install font-spider -g
也可以打開Node.js command prompt如下圖所示关拒，并輸入命令：npm install font-spider -g 回車執(zhí)行
command prompt.png
npm install font-spider -g
安裝字蛛.png
三、使用字蛛
1着绊、新建一個font.html頁面谐算，下面是font.html中的內(nèi)容。要根據(jù)自己文件夾中有的字體去引入归露，但是ttf格式的字體是一定要存在的洲脂。
注意：
- @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動生成剧包。
- 開發(fā)階段請使用相對路徑的 CSS 與 WebFont
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*聲明 WebFont*/
@font-face {
font-family: 'YaHeiBold';
src: url('./YaHeiBold.eot');
src:
url('./YaHeiBold.eot?#font-spider') format('embedded-opentype'),
url('./YaHeiBold.woff2') format('woff2'),
url('./YaHeiBold.woff') format('woff'),
url('./YaHeiBold.ttf') format('truetype'),
url('./YaHeiBold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
</body>
</html>
結(jié)構(gòu).png
2恐锦、html文件構(gòu)建好后，在終端輸入font-spider + 你的font.html的位置疆液，然后回車即可一铅。
font-spider ./demo/*.html
頁面依賴的字體將會自動壓縮好，原 .ttf 字體會備份
壓縮成功.png
3堕油、有可能你會出現(xiàn)報錯潘飘，像下圖這樣的。出現(xiàn)這樣情況就是font.html中的字體路徑錯了掉缺。
image.png
4卜录、壓縮成功后會自動生成.font-spider文件夾，可以看到原來的字體體積已經(jīng)小了很多眶明。前面的對比圖就是效果艰毒。
5、最后一步赘来，在css中引入已經(jīng)壓縮好的字體就行现喳。
![]()
image.png
image.png
