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('../font/pinghei.eot');

src:

url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),

url('../font/pinghei.woff') format('woff'),

url('../font/pinghei.ttf') 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查看

字蛛 grunt 插件: https://github.com/aui/grunt-font-spider

字蛛 gulp 插件:https://github.com/aui/gulp-font-spider

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 // 所需文字

}))

.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文件就可以配置好的目录下输出对应的字体及css文件,字体文件也会由原来的即M变成几k了.node fontmin.js

Fontmin还提供了客户端, 直接把 TTF 拖进去，左侧输入需要文字，右侧实时看效果。点击生成，一步搞定. 建议还是使用node模块的方式, 只要在项目中配置好, 以后再有任何文字需要使用字体, 直接添加到fontmin.js中的text中,执行node fontmin.js命令就搞定了.

4、缺点

Fontmin适用于文字不经常变动, 或者在一定范围内变动的情况, 如果文字经常变，而且没有固定的范围，那么也是没有办法的。

更多web前端自学知识，请查阅 HTML中文网 ！！