node字體壓縮外掛程式font-spider的用法介紹

這篇文章帶給大家的內容是關於node字體壓縮插件font-spider的用法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

需求：

1. 根據甲方要求，使用UI中指定字型

2. 行動端預設顯示系統預設字體，非系統預設字體需要自行引入字體包

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

分析：

1. 文字內容為固定內容，不需要更新

2. 文字內容多為常用文字，多數文字用不到

外掛程式：

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

操作：

1. #安裝外掛程式

2. ##提取項目文字：

     建立一個臨時html，將所有項目需要使用的文字放到html中
   

3. 在htmnl中寫入樣式程式碼，舉個栗子：

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

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

注意：

1. 如果頁面文字內容需要經常更新

2. 如果需要對input表單內容同樣應用定製字體請放棄本文章所述方法，可以考慮透過服務端渲染，動態生成字體包，或者，老老實實將完整的字體包引入頁面

以上是node字體壓縮外掛程式font-spider的用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！