html字体⽂件太⼤,css字体⽂件包太⼤⽆法引⼊怎么处理？
前端开发的同学，我们经常会碰到需要还原设计稿中的特殊字体。这时，我们可能会采⽤两种⽅案：
1、使⽤photoshop将⽂本图层单独导出成图⽚;
2、直接引⼊改字体的字体库.ttf⽂件
⾸先第⼀种⽅案的缺点，使⽤图⽚代替⽂字，制作和维护的成本很⾼，前期切图，合并雪碧图⽐较繁琐，后期修改和维护更是⿇烦。同时使⽤图⽚，会带来更多的宽带消耗；⽤户体验⽅⾯，⽤户⽆法进⾏⽂字的选择，复制等操作，体验也不好。
第⼆种⽅案，解决了上述的⼀些问题，但是由于汉字数量太⼤，导致中⽂字体⽂件也较⼤，通常都会有⼏M⼤⼩，不适合在项⽬中使⽤。尤其是移动端项⽬，由于字体加载速度很慢，体验会⼗分不好。
那么如何解决移动端引⼊的字体⽂件过⼤问题？下⾯本篇⽂章将介绍两种⾃动化⼯具，来实现在移动端愉快的使⽤特殊字体，分别是Font-Spider(字蛛)和fontmin。
浏览器对字体的⽀持
不同浏览器对字体的⽀持不同，所以我们要对不同的浏览器制作不同的字体。下图是浏览器对字体的⽀持情况，其中N为不⽀持，P为部分⽀持，Y为⽀持。
Font-Spider(字蛛)
字蛛通过分析本地 CSS 与 HTML ⽂件获取 WebFont 中没有使⽤的字符，并将这些字符数据从字体中删除以实现压缩，同时⽣成跨浏览器使⽤的格式。Font-Spider的使⽤⽅法很简单，官⽹介绍的也很详
细，下⾯简单介绍，也可直接去官⽹查看.
1、⾸先，全局安装font-slidernpm install font-spider -g
2、在css中使⽤/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../');
src:
url('../?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../f') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使⽤选择器指定字体*/
.home h1, .demo > .test {
font-family: 'pinghei';
}
提⽰: @font-face 中的 src 定义的 .ttf ⽂件必须存在，其余的格式将由⼯具⾃动⽣成
3、运⾏font-slider命令font-spider ./demo/*.html
页⾯依赖的字体将会⾃动压缩好，原来⼏M的字体⽂件现在只剩下⼏k了, 是不是很爽呢.
4、使⽤gulp,grunt插件
除了直接进⾏编译,font-slider还提供了gulp和grunt的插件，可以更⽅便的在项⽬中使⽤，具体使⽤可直接到github查看
5、使⽤的局限
font-slider虽然好⽤，但是由于其原理是直接分析本地 CSS 与 HTML ⽂件获取没有WebFont中没有使⽤过的字符，这样⼀来，对于动态⽣成的⽂字，就没有办法使⽤font-slider了.这是个坏消息!尤其在当下，很多框架都是数据驱动的，更是很多⽂字都不会直接出现html⽂件中.对于这种情况, 下⾯介绍的fontmin或许能解决.
四、使⽤Fontmin
Fontmin 是由百度推出的⼀个字体⼦集化⽅案。使⽤fontmin可以按需提取字体中的部分字型，最⼩化打包字体，⾃动⽣成 WebFont 字体⽂件(ttf/woff/eot/svg)和 CSS ⽂件, 并可利⽤ @font-face 将⾃定义字体呈现到⽹页中，提升⽹页⽂字体验。Fontmin 提供了Node.js 模块和客户端 2 种使⽤⽅法，下⾯主要介绍Node.js模块的使⽤，更多使⽤请移步到Fontmin快速指南
1、安装fontminnpm i -g fontmin
2、配置
在项⽬中创建fontmin.jsvar Fontmin = require('fontmin');
var srcPath = 'font/*.ttf'; // 字体源⽂件路径
var destPath = 'font'; // 字体输出路径
var text = '我你今天中⼤奖了快来领红包';//有哪些⽂字可能需要⽤到这个字体的，都可以在这⾥进⾏配置
// 初始化
var fontmin = new Fontmin()
.src(srcPath) // 输⼊配置
.use(Fontmin.glyph({ // 字型提取插件
text: text // 所需⽂字
}))
.f2eot()) // eot 转换插件
.f2woff()) // woff 转换插件
.f2svg()) // svg 转换插件
css怎么创建.use(Fontmin.css()) // css ⽣成插件
.dest(destPath); // 输出配置
// 执⾏
fontmin.run(function (err, files, stream) {
if (err) { // 异常捕捉
<(err);
}
console.log('done'); // 成功
});
3、输出
执⾏fontmin.js⽂件就可以配置好的⽬录下输出对应的字体及css⽂件，字体⽂件也会由原来的即M变成⼏k了.node fontmin.js
Fontmin还提供了客户端, 直接把 TTF 拖进去，左侧输⼊需要⽂字，右侧实时看效果。点击⽣成，⼀步搞定. 建议还是使⽤node模块的⽅式, 只要在项⽬中配置好, 以后再有任何⽂字需要使⽤字体, 直接添加到fontmin.js中的text中，执⾏node fontmin.js命令就搞定了.
4、缺点
Fontmin适⽤于⽂字不经常变动, 或者在⼀定范围内变动的情况, 如果⽂字经常变，⽽且没有固定的范围，那么也是没有办法的。
更多web前端⾃学知识，请查阅 HTML中⽂⽹ ！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。