node 字體壓縮插件 font-spider

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

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

需求：

根據(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

操作：

安裝插件

提取項(xiàng)目文字：
創(chuàng)建一個臨時html，將所有項(xiàng)目需要用到的文本放到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)生成字體包，或者，老老實(shí)實(shí)將完整的字體包引入頁面

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

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

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

相關(guān)文章

字蛛的使用及說明

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

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

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

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

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

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

摘要：最近在前端開發(fā)時，因?yàn)樵O(shè)計(jì)的原因，要引用一些特殊字體格式，但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要左右，嚴(yán)重影響了網(wǎng)頁效率。最近在前端開發(fā)時，因?yàn)樵O(shè)計(jì)的原因，要引用一些特殊字體（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ā)時，因?yàn)樵O(shè)計(jì)的原因，要引用一些特殊字體格式，但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要左右，嚴(yán)重影響了網(wǎng)頁效率。最近在前端開發(fā)時，因?yàn)樵O(shè)計(jì)的原因，要引用一些特殊字體（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