node 字體壓縮插件 font-spider

zsirfs 發布于2019-08-23 12:09 / 3029人閱讀

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

需求：

根據甲方要求，使用UI中指定字體

移動端默認顯示系統默認字體，非系統默認字體需要自行引入字體包

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

分析：

文本內容為固定內容，不需要更新

文本內容大多為常用文字，大多文字用不上

插件：

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

操作：

安裝插件

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

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

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

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

注意：

如果頁面文本內容需要經常更新

如果需要對input表單內容同樣應用定制字體

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

GPU云服務器云服務器網頁字體插件html js 視頻壓縮插件網站服務器壓縮插件 js上傳圖片壓縮插件

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

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

字蛛的使用及說明

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

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

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

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

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

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

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

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

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

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