壓縮中文字體的體積 — 字蛛(font-spider)

字蛛是什么渤愁?

字蛛是一個中文字體壓縮器

字體優(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格式的字體是一定要存在的洲脂。

注意:

  1. @font-face 中的 src 定義的 .ttf 文件必須存在,其余的格式將由工具自動生成剧包。
  2. 開發(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
最后要注意,當(dāng)網(wǎng)頁的字體改變時犬辰,要重新生成嗦篱。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市幌缝,隨后出現(xiàn)的幾起案子灸促,更是在濱河造成了極大的恐慌,老刑警劉巖涵卵,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浴栽,死亡現(xiàn)場離奇詭異,居然都是意外死亡轿偎,警方通過查閱死者的電腦和手機典鸡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坏晦,“玉大人萝玷,你說我怎么就攤上這事±バ觯” “怎么了球碉?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長仓蛆。 經(jīng)常有香客問我睁冬,道長,這世上最難降的妖魔是什么看疙? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任豆拨,我火速辦了婚禮,結(jié)果婚禮上能庆,老公的妹妹穿的比我還像新娘辽装。我一直安慰自己,他們只是感情好相味,可當(dāng)我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布拾积。 她就那樣靜靜地躺著,像睡著了一般丰涉。 火紅的嫁衣襯著肌膚如雪拓巧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天一死,我揣著相機與錄音肛度,去河邊找鬼。 笑死投慈,一個胖子當(dāng)著我的面吹牛承耿,可吹牛的內(nèi)容都是我干的冠骄。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼加袋,長吁一口氣:“原來是場噩夢啊……” “哼凛辣!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起职烧,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤扁誓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蚀之,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蝗敢,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年足删,在試婚紗的時候發(fā)現(xiàn)自己被綠了寿谴。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡失受,死狀恐怖拭卿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情贱纠,我是刑警寧澤峻厚,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站谆焊,受9級特大地震影響惠桃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辖试,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一辜王、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧罐孝,春花似錦呐馆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至改艇,卻和暖如春收班,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背谒兄。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工摔桦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人承疲。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓邻耕,卻偏偏與公主長得像鸥咖,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子兄世,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,982評論 2 361