网页设计引入的字体包过大的压缩方法

这里我们是使用的压缩工具是“ 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;

————结束————

网页设计引入的字体包过大的压缩方法相关推荐

解决uniapp静态文件字体包太大打包大小超出限制
一.解决uniapp静态文件字体包太大打包大小超出限制 1.在app.vue文件下使用本地文件修改为网络路径文件大小超过20m可以使用cdn加速我使用unicloud(示例): <style ...
html艺术字在线制作,HTML网页设计中的字体设计
HTML网页设计中的字体设计字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面: 一.字符集 ...
html网页设计同字,HTML网页设计中的字体设计
HTML网页设计中的字体设计字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面: 一.字符集 ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
Qt引入图标字体包iconfont
客户端总是有各种换肤需求,为实现快速换肤,可引入图标字体包 1.使用阿里巴巴矢量图标库,网址https://www.iconfont.cn,切一张默认颜色的svg图标上传到我的项目,图标会生成一个唯一 ...
html网页大赛小组作品,ACCPT183班HTML网页设计大赛：小页面，大精彩！
原标题:ACCPT183班HTML网页设计大赛:小页面,大精彩! 不会动手的IT工程师不是好的IT工程师!实践出真知,北大青鸟深圳嘉华学校定期举办各类知识竞赛,一是为了提高学生的综合能力,二是为了让学 ...
自定义字体包过大，导致页面加载缓慢的问题解决
// 字体包过大,在渲染页面客户端时加载缓慢,导致页面加载缓慢影响用户体验.需要处理字体包: // 1. 转码,使得不受不同浏览器之间的限制 2.压缩:使得加载更迅速 // 使用中文字体压缩器:fon ...
HTML5期末大作业：魔域私服网站设计——魔域私服游戏(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html实训大作业
HTML5期末大作业:魔域私服网站设计--魔域私服游戏(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html实训大作业常见网页设计作业题材有个人. 美食. 公司. 学 ...
静态HTML网页设计作品——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业
HTML5期末大作业:海贼王影视网站设计--仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业文章目录 HTML5期末大作业:海贼王影视 ...
# HTML5期末大作业：海贼王影视网站设计——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业网页设计实例企业网站制作
HTML5期末大作业:海贼王影视网站设计--仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业网页设计实例企业网站制作常见网页设计作 ...

网页设计引入的字体包过大的压缩方法

网页设计引入的字体包过大的压缩方法相关推荐

最新文章

热门文章