node 字體壓縮插件 font-spider

zsirfs 發(fā)布于2019-08-23 12:09 / 3081人閱讀

摘要：注意如果頁面文本內(nèi)容需要經(jīng)常更新如果需要對表單內(nèi)容同樣應(yīng)用定制字體請放棄本文章所述方法，可以考慮通過服務(wù)端渲染，動態(tài)生成字體包，或者，老老實實將完整的字體包引入頁面

需求：

根據(jù)甲方要求，使用UI中指定字體

移動端默認(rèn)顯示系統(tǒng)默認(rèn)字體，非系統(tǒng)默認(rèn)字體需要自行引入字體包

字體包過大，字體包通常在幾MB，嚴(yán)重拖累頁面加載速度

分析：

文本內(nèi)容為固定內(nèi)容，不需要更新

文本內(nèi)容大多為常用文字，大多文字用不上

插件：

font-spider
node 安裝插件方法：npm install font-spider -g

操作：

安裝插件

提取項目文字：
創(chuàng)建一個臨時html，將所有項目需要用到的文本放到html中

在htmnl中寫入樣式代碼，舉個栗子：

    @font-face {
        font-family: "myfont";
        src: url("./common/assets/font/myfont.ttf");
    }
    * {
        font-family: "myfont";
    }

在命令提示窗口中，將目錄展開到html所在的目錄，輸入指令：font-spider *.html 即可將該目錄下所有html的字體抽離打包。

注意：

如果頁面文本內(nèi)容需要經(jīng)常更新

如果需要對input表單內(nèi)容同樣應(yīng)用定制字體

請放棄本文章所述方法，可以考慮通過服務(wù)端渲染，動態(tài)生成字體包，或者，老老實實將完整的字體包引入頁面

云服務(wù)器 GPU云服務(wù)器網(wǎng)頁字體插件html js 視頻壓縮插件網(wǎng)站服務(wù)器壓縮插件 js上傳圖片壓縮插件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/98025.html

相關(guān)文章

字蛛的使用及說明

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

RdouTyping 2019-08-01 17:32 評論0 收藏0
字蛛的使用及說明

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

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

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

dreambei 2019-08-29 12:57 評論0 收藏0
Web引用中文個性字體

摘要：最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體格式，但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要左右，嚴(yán)重影響了網(wǎng)頁效率。最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體（otf格式），但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要8mb左右，嚴(yán)重影響了網(wǎng)頁效率。經(jīng)過一番搜索，發(fā)現(xiàn)了前端字體壓縮工具（只支持utf-8格式）font-spider. font-spider介紹具體...

EdwardUp 2019-08-02 16:01 評論0 收藏0
Web引用中文個性字體

摘要：最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體格式，但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要左右，嚴(yán)重影響了網(wǎng)頁效率。最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體（otf格式），但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要8mb左右，嚴(yán)重影響了網(wǎng)頁效率。經(jīng)過一番搜索，發(fā)現(xiàn)了前端字體壓縮工具（只支持utf-8格式）font-spider. font-spider介紹具體...

nemo 2019-08-30 14:13 評論0 收藏0