网页设计引入的字体包过大的压缩方法
这里我们是使用的压缩工具是“ fontmin ”压缩与引入步骤:1、在你的项目中npm下载fontminnpm install fontmin2、在项目里编写一个fontmin.js文件,位置无所谓文件内容:3、运行fontmin.js文件—压缩之后的输出字体内容—4、打开其中压缩生成的css文件内容:将里面的内容复制到你所需要使用的地方,或者放在一个文件里面并在App.vue中全局引用(注意修改
·
这里我们是使用的压缩工具是“ fontmin ”
压缩与引入步骤:
1、在你的项目中npm下载fontmin
npm install fontmin
2、在项目里编写一个fontmin.js文件,位置无所谓
文件内容:
var Fontmin = require('fontmin');
//引入插件,当第一步中,使用全局下载的插件,这里路径要注意匹配,否则后面运行时会报找不到模块的错误,
// 所以建议使用第二种:下载到当前项目的依赖中,本文件(fontmin.js)也建在当前项目目录下
var srcPath = './src/assets/fonts/苹方 MEDIUM.TTF';//需要压缩的字体包的相对位置
var destPath = './src/assets/fontmin/'; //压缩之后字体的输出位置
var text = ''//需要压缩的内容,设置为''为整个字体包压缩
// 初始化
var fontmin = new Fontmin()
.src(srcPath) // 输入配置
.use(Fontmin.glyph({ // 字型提取插件
text: text // 所需文字
}))
.use(Fontmin.ttf2eot()) // eot 转换插件
.use(Fontmin.ttf2woff()) // woff 转换插件
.use(Fontmin.ttf2svg()) // svg 转换插件
.use(Fontmin.css()) // css 生成插件
.dest(destPath); // 输出配置
// 执行
fontmin.run(function (err, files, stream) {
if (err) { // 异常捕捉
console.error(err);
}
//console.log('done'); // 成功
});
3、运行fontmin.js文件
—压缩之后的输出字体内容—
4、打开其中压缩生成的css文件
内容:
将里面的内容复制到你所需要使用的地方,或者放在一个文件里面并在App.vue中全局引用
(注意修改相对路径)
其中字体名称字可以自己改变,
博主是放在一个全局css文件,并在App.vue里面引用的
5、将需要使用字体的地方,font-family设置成你压缩字体对应的名字
如:font-family: Medium;
————结束————
更多推荐
已为社区贡献1条内容
所有评论(0)