字蛛的使用及說明

RdouTyping 發布于2019-08-01 17:32 / 3401人閱讀

摘要：字蛛通過分析本地與文件獲取中沒有使用的字符，并將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。如圖使用字蛛版本不建議過高，我使用的版本沒有成功，后來改成的版本成功了。

web字體體積大導致加載過慢，對于前端來說是一大需要解決的問題，作為一個前端小白，看不懂文檔也是個通病，不過還是花了一些時間和朋友一起研究了這個問題，并找到了解決方案就是“字蛛”。

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

字蛛簡介：

官方的說法 "字蛛是一款中文字體壓縮器"。字蛛通過分析本地 CSS 與 HTML 文件
獲取 WebFont 中沒有使用的字符，并將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。

字蛛的API：

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

看網站和GitHub還是比較清楚的，但是我看文檔比較費勁，花了好久才搞明白，下面就說一下使用流程和我碰到的一些需要注意的事項。

1. 首先按照官網說的先安裝好NodeJS然后執行：

npm install font-spider -g

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

2. 在CSS中使用Webfont：

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

官網上的注意事項是兩條：

1. @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動生成。
2. 開發階段請使用相對路徑的 CSS 與 WebFont。

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

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

3.運行font-spider命令：

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

按照網頁的介紹來說，進行完這三步后，就會發現字體已經壓縮好了，在正式使用前可以先利用demo嘗試一下。

按照開發來說,一般我們會把 HTML 按不同的類別分別放進不同的文件夾，可我們怎么能同時爬取這些字呢，這時就可以利用font-spider在GitHub中給出的API "dest".

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

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

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

使用腳本的方法和其他需要注意的幾項：

1.使用前需要安裝bash，我使用的是Git Bash。
2.打開腳本后會出現一句話 "please input build path:" ,然后寫上你需要壓縮并執行字蛛的文件夾路徑，
點擊回車命令就會執行，執行成功后窗口將自動關閉。

如圖：

3.使用字蛛 nodeJs 版本不建議過高，我使用8.x的版本沒有成功，后來改成6.x的版本成功了。
看了其他人的文檔發現可能也跟npm有關，如果npm版本過高也是執行不成功。
4.其他文檔中也說字蛛使用有坑點，但本人使用中并未碰到，所以在這里就不再贅述了。

最后附上腳本的下載鏈接(上次的腳本有些問題，現在已經更改并測試沒有問題)：http://pan.baidu.com/s/1kVf1b4z

云服務器 GPU云服務器合同申請及操作說明云服務器ecs linux系統負載查詢及分析說明使用說明 RCMD使用說明

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51209.html

字蛛的使用及說明

摘要：字蛛通過分析本地與文件獲取中沒有使用的字符，并將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。如圖使用字蛛版本不建議過高，我使用的版本沒有成功，后來改成的版本成功了。 web字體體積大導致加載過慢，對于前端來說是一大需要解決的問題，作為一個前端小白，看不懂文檔也是個通病，不過還是花了一些時間和朋友一起研究了這個問題，并找到了解決方案就是字蛛。字蛛網站：http://...

Joonas 2019-08-29 13:21 評論0 收藏0
設計師的春天：中文WebFont解決方案Font-Spider(字蛛)

摘要：針對以上的問題，我們可以得出中文要解決的問題是壓縮和轉碼。主頁中文字體演示與工具使用請前往主頁項目實踐年接到的最后一個項目需求騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式，更加簡潔大氣。我們在日常需求中，經常會碰到視覺設計師對某個中文字體效果非常堅持的情況，因為頁面是否高大上，字體選擇是很重要的一個因素，選擇合適的字體可以讓頁面更優雅。面對這種問題，我們通常以下方式來進...

dreambei 2019-08-29 12:57 評論0 收藏0
字蛛font-spider報錯,<web font not found>,碰到的最新問題

摘要：的問題沒碰到但是我的卻一直報錯后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發現問題在問題在于中的無法解析并找不到字體刪除就可以執行了執行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報錯.后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發現問題在 .clearfix:after{content: 20;display: block;vi...

starsfun 2019-08-30 15:55 評論0 收藏0
字蛛font-spider報錯,<web font not found>,碰到的最新問題

摘要：的問題沒碰到但是我的卻一直報錯后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發現問題在問題在于中的無法解析并找不到字體刪除就可以執行了執行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報錯.后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發現問題在 .clearfix:after{content: 20;display: block;vi...

yvonne 2019-08-02 14:11 評論0 收藏0
字蛛font-spider報錯,<web font not found>,碰到的最新問題

摘要：的問題沒碰到但是我的卻一直報錯后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發現問題在問題在于中的無法解析并找不到字體刪除就可以執行了執行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報錯.后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發現問題在 .clearfix:after{content: 20;display: block;vi...

wuyumin 2019-08-26 13:29 評論0 收藏0