這里我們是使用的壓縮工具是“ fontmin ”

壓縮與引入步驟：
1、在你的項(xiàng)目中npm下載fontmin
npm install fontmin

2、在項(xiàng)目里編寫一個(gè)fontmin.js文件，位置無(wú)所謂
文件內(nèi)容：

var Fontmin = require('fontmin'); //引入插件，當(dāng)?shù)谝徊街?#xff0c;使用全局下載的插件，這里路徑要注意匹配，否則后面運(yùn)行時(shí)會(huì)報(bào)找不到模塊的錯(cuò)誤， // 所以建議使用第二種：下載到當(dāng)前項(xiàng)目的依賴中，本文件（fontmin.js）也建在當(dāng)前項(xiàng)目目錄下var srcPath = './src/assets/fonts/蘋方 MEDIUM.TTF';//需要壓縮的字體包的相對(duì)位置var destPath = './src/assets/fontmin/'; //壓縮之后字體的輸出位置var text = ''//需要壓縮的內(nèi)容，設(shè)置為''為整個(gè)字體包壓縮// 初始化 var fontmin = new Fontmin().src(srcPath) // 輸入配置.use(Fontmin.glyph({ // 字型提取插件text: text // 所需文字})).use(Fontmin.ttf2eot()) // eot 轉(zhuǎn)換插件.use(Fontmin.ttf2woff()) // woff 轉(zhuǎn)換插件.use(Fontmin.ttf2svg()) // svg 轉(zhuǎn)換插件.use(Fontmin.css()) // css 生成插件.dest(destPath); // 輸出配置// 執(zhí)行 fontmin.run(function (err, files, stream) {if (err) { // 異常捕捉console.error(err);}//console.log('done'); // 成功 });

3、運(yùn)行fontmin.js文件
—壓縮之后的輸出字體內(nèi)容—

4、打開其中壓縮生成的css文件
內(nèi)容：

將里面的內(nèi)容復(fù)制到你所需要使用的地方，或者放在一個(gè)文件里面并在App.vue中全局引用
（注意修改相對(duì)路徑）
其中字體名稱字可以自己改變，
博主是放在一個(gè)全局css文件，并在App.vue里面引用的


5、將需要使用字體的地方，font-family設(shè)置成你壓縮字體對(duì)應(yīng)的名字
如:font-family: Medium;

————結(jié)束————

總結(jié)

以上是生活随笔為你收集整理的网页设计引入的字体包过大的压缩方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。