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://www.elefans.com/dongtai/1728202440a1149558.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。