这里我们是使用的压缩工具是“ fontmin ”

压缩与引入步骤:
1、在你的项目中npm下载fontmin
npm install fontmin

2、在项目里编写一个fontmin.js文件,位置无所谓
文件内容:
在这ddd里插入图片描述

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;

————结束————

Logo

前往低代码交流专区

更多推荐