摘要:字蛛通過分析本地與文件獲取中沒有使用的字符,并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮,同時(shí)生成跨瀏覽器使用的格式。如圖使用字蛛版本不建議過高,我使用的版本沒有成功,后來改成的版本成功了。
web字體體積大導(dǎo)致加載過慢,對于前端來說是一大需要解決的問題,作為一個(gè)前端小白,看不懂文檔也是個(gè)通病,不過還是花了一些時(shí)間和朋友一起研究了這個(gè)問題,并找到了解決方案就是“字蛛”。
字蛛網(wǎng)站:http://font-spider.org
GitHub源碼:https://github.com/aui/font-s...
字蛛簡介:
官方的說法 "字蛛是一款中文字體壓縮器"。字蛛通過分析本地 CSS 與 HTML 文件 獲取 WebFont 中沒有使用的字符,并將這些字符數(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ī)頁面到本地,然后壓縮(本地路徑必須是絕對路徑): font-spider --map “ http://font-spider.org/font,/Website/font ” http://font-spider.org/index.html
看網(wǎng)站和GitHub還是比較清楚的,但是我看文檔比較費(fèi)勁,花了好久才搞明白,下面就說一下使用流程和我碰到的一些需要注意的事項(xiàng)。
1. 首先按照官網(wǎng)說的 先安裝好NodeJS然后執(zhí)行:
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; } //字體名稱是自定義的,按自己的要求決定名字就可以了。
官網(wǎng)上的注意事項(xiàng)是兩條:
1. @font-face 中的 src 定義的 .ttf 文件必須存在,其余的格式將由工具自動(dòng)生成。 2. 開發(fā)階段請使用相對路徑的 CSS 與 WebFont。
使用的時(shí)候 把上面這一部分代碼直接復(fù)制就可以了。
特別需要注意的是:
1. 官網(wǎng)上的第一條注意事項(xiàng),ttf格式是必須存在的,也就是ttf格式一定要按相對路徑找到文件才可以。 其他的一定都不要改動(dòng),只把字體名字改成自定義的就可以了。(我當(dāng)時(shí)就改動(dòng)了其他的結(jié)果一直沒生效) 2. "../font/"改成自己的路徑建議與ttf格式字體的路徑一樣, 執(zhí)行完命令后會(huì)自動(dòng)備份原始的ttf格式,壓縮好其他格式將直接放在該路徑下。
3.運(yùn)行font-spider命令:
在node.js command prompt中直接輸入需要壓縮的頁面 font-spider ./demo/*.html
按照網(wǎng)頁的介紹來說,進(jìn)行完這三步后,就會(huì)發(fā)現(xiàn)字體已經(jīng)壓縮好了,在正式使用前可以先利用demo嘗試一下。
按照開發(fā)來說,一般我們會(huì)把 HTML 按不同的類別分別放進(jìn)不同的文件夾,可我們怎么能同時(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è)頁面或文件夾的字體,但如果每次在項(xiàng)目布上線前我們都要寫一大長串不同的路徑和文件名字,這真是一件讓人頭疼的事情。
為了解決這個(gè)問題,我們編寫了一段bash腳本方便大家使用,只要在每次項(xiàng)目上線前寫出HTML所在文件夾的路徑,這段腳本就會(huì)自動(dòng)遍歷出這個(gè)文件夾中所有的HTML文件,壓縮并執(zhí)行font-spider命令,從而直接對字體進(jìn)行生成。當(dāng)然同時(shí)如果文件夾內(nèi)還存在其他類型的文件,本腳本也可以做到忽略其他文件,只遍歷HTML文件。
使用腳本的方法和其他需要注意的幾項(xiàng):
1.使用前需要安裝bash,我使用的是Git Bash。 2.打開腳本后會(huì)出現(xiàn)一句話 "please input build path:" ,然后寫上你需要壓縮并執(zhí)行字蛛的文件夾路徑, 點(diǎn)擊回車命令就會(huì)執(zhí)行,執(zhí)行成功后窗口將自動(dòng)關(guān)閉。
如圖:
3.使用字蛛 nodeJs 版本不建議過高,我使用8.x的版本沒有成功,后來改成6.x的版本成功了。 看了其他人的文檔發(fā)現(xiàn)可能也跟npm有關(guān),如果npm版本過高也是執(zhí)行不成功。 4.其他文檔中也說字蛛使用有坑點(diǎn),但本人使用中并未碰到,所以在這里就不再贅述了。
最后附上腳本的下載鏈接(上次的腳本有些問題,現(xiàn)在已經(jīng)更改并測試沒有問題):http://pan.baidu.com/s/1kVf1b4z
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51209.html
摘要:針對以上的問題,我們可以得出中文要解決的問題是壓縮和轉(zhuǎn)碼。主頁中文字體演示與工具使用請前往主頁項(xiàng)目實(shí)踐年接到的最后一個(gè)項(xiàng)目需求騰訊云解決方案改版。新的騰訊云解決方案采用了全新的排版方式,更加簡潔大氣。 我們在日常需求中,經(jīng)常會(huì)碰到視覺設(shè)計(jì)師對某個(gè)中文字體效果非常堅(jiān)持的情況,因?yàn)轫撁媸欠窀叽笊希煮w選擇是很重要的一個(gè)因素,選擇合適的字體可以讓頁面更優(yōu)雅。面對這種問題,我們通常以下方式來進(jìn)...
摘要:的問題沒碰到但是我的卻一直報(bào)錯(cuò)后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發(fā)現(xiàn)問題在問題在于中的無法解析并找不到字體刪除就可以執(zhí)行了執(zhí)行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報(bào)錯(cuò).后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發(fā)現(xiàn)問題在 .clearfix:after{content: 20;display: block;vi...
摘要:的問題沒碰到但是我的卻一直報(bào)錯(cuò)后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發(fā)現(xiàn)問題在問題在于中的無法解析并找不到字體刪除就可以執(zhí)行了執(zhí)行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報(bào)錯(cuò).后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發(fā)現(xiàn)問題在 .clearfix:after{content: 20;display: block;vi...
摘要:的問題沒碰到但是我的卻一直報(bào)錯(cuò)后來把樣式表里的文件全部刪除居然好用了然后逐類刪除逐行刪除發(fā)現(xiàn)問題在問題在于中的無法解析并找不到字體刪除就可以執(zhí)行了執(zhí)行完畢再還原回來完美解決 @media的問題沒碰到,但是我的卻一直報(bào)錯(cuò).后來把樣式表里的文件全部刪除,居然好用了.然后逐類刪除,逐行刪除,發(fā)現(xiàn)問題在 .clearfix:after{content: 20;display: block;vi...
閱讀 3274·2023-04-25 18:03
閱讀 1143·2021-11-15 11:38
閱讀 5522·2021-10-25 09:45
閱讀 840·2021-09-24 09:48
閱讀 2272·2021-09-22 15:34
閱讀 1734·2019-08-30 15:44
閱讀 2675·2019-08-30 13:12
閱讀 604·2019-08-29 16:05