詳解node字體壓縮插件font-spider的用法
更新時(shí)間：2018年09月28日 11:48:04 投稿：laozhang
在本篇文章中給大家詳細(xì)講述了node字體壓縮插件font-spider的用法的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友參考下。
需求：
根據(jù)甲方要求，使用UI中指定字體
移動(dòng)端默認(rèn)顯示系統(tǒng)默認(rèn)字體，非系統(tǒng)默認(rèn)字體需要自行引入字體包
字體包過(guò)大，字體包通常在幾MB，嚴(yán)重拖累頁(yè)面加載速度
分析：
文本內(nèi)容為固定內(nèi)容，不需要更新
文本內(nèi)容大多為常用文字，大多文字用不上
插件：
font-spider node 安裝插件方法：npm install font-spider -g
操作：
安裝插件
提取項(xiàng)目文字：
創(chuàng)建一個(gè)臨時(shí)html，將所有項(xiàng)目需要用到的文本放到html中
在htmnl中寫入樣式代碼，舉個(gè)栗子：
@font-face {
font-family: 'myfont';
src: url('./common/assets/font/myfont.ttf');
}
* {
font-family: 'myfont';
}
在命令提示窗口中，將目錄展開到html所在的目錄，輸入指令：font-spider *.html 即可將該目錄下所有html的字體抽離打包。
注意：
如果頁(yè)面文本內(nèi)容需要經(jīng)常更新
如果需要對(duì)input表單內(nèi)容同樣應(yīng)用定制字體請(qǐng)放棄本文章所述方法，可以考慮通過(guò)服務(wù)端渲染，動(dòng)態(tài)生成字體包，或者，老老實(shí)實(shí)將完整的字體包引入頁(yè)面
相關(guān)文章
在生產(chǎn)環(huán)境中,更常見的做法是使用專門的日志記錄庫(kù),如winston、log4js等,來(lái)實(shí)現(xiàn)更靈活和可配置的日志記錄功能,本篇文章將介紹的是winston的強(qiáng)大的日志記錄功能,快跟隨小編一起學(xué)習(xí)一下吧2024-01-01
npm安裝yarn后找不到y(tǒng)arn報(bào)錯(cuò)的解決過(guò)程
這篇文章主要給大家介紹了關(guān)于npm安裝yarn后找不到y(tǒng)arn報(bào)錯(cuò)的解決過(guò)程,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)遇到同樣問題的同學(xué)具有一定的參考性,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Node.js 制作實(shí)時(shí)多人游戲框架,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了Node.js一行命令上傳本地文件到服務(wù)器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Bun入門學(xué)習(xí)教程吊打Node或Deno的現(xiàn)代JS運(yùn)行時(shí)
這篇文章主要為大家介紹了一款吊打Node或Deno的現(xiàn)代JS運(yùn)行時(shí)，Bun入門學(xué)習(xí)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本篇文章給大家總結(jié)了node.js博客項(xiàng)目開發(fā)的相關(guān)步驟以及知識(shí)點(diǎn)分享，有興趣的朋友參考下。2018-03-03
M2實(shí)現(xiàn)Nodejs項(xiàng)目自動(dòng)部署的方法步驟
這篇文章主要介紹了M2實(shí)現(xiàn)Nodejs項(xiàng)目自動(dòng)部署的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
node.js中的fs.readlinkSync方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.readlinkSync方法使用說(shuō)明,本文介紹了fs.readlinkSync方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
解決node-webkit 不支持html5播放mp4視頻的方法
本文給大家分享的是解決node-webkit 不支持html5播放mp4視頻的方法，其原因大概是因?yàn)閚ode-webkit沒有購(gòu)買mp4格式的專利授權(quán)，恩，我們來(lái)想個(gè)辦法來(lái)解決這個(gè)事情吧。2015-03-03
Node.js是一套用來(lái)編寫高性能網(wǎng)絡(luò)服務(wù)器的JavaScript工具包，一系列的變化由此開始。這篇文章主要給大家介紹了如何快速搭建Node.Js服務(wù)器的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。2017-03-03