admin管理员组文章数量:1594755
这里我们是使用的压缩工具是“ 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;
————结束————
版权声明:本文标题:网页设计引入的字体包过大的压缩方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1728202440a1149558.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论