文章来源：http://www.zretc.com/technologyDetail/429.html

在一些推广活动项目的页面中，设计师可能会需要用到许多好看的字体，例如：方正综艺.ttf、方正兰亭、 方正喵呜.ttf等（此处省略N个字体）。

当设计师使用这些特殊字体的时候，前端攻城狮同学们往往因为这些字体“太有个性”而烦恼。今天小卓为大家分享一些经验，实用又经典，希望能对童鞋们的工作有所帮助！

• 方法一：切图法

• 方法二：Font-spider介绍及使用

• Font-spider自动化构建工具gulp介绍及使用

步入正题：

应对设计师的"字体”难题，有两种解决方式可供同学们挑选，方式一是我们熟知常用的切图法，方法二是今日文章重点介绍的Font-spider。

方法一：切图法

大多数的活动页面采用的方式是将字体储存为单个的小图片，这种方式简单粗暴。

有关切图方式的优缺点，想必大家都与小卓有相同的感受。切图方式简单易用，效果与设计图完全一致。然而，它也有很多缺点，例如：如果只有几张图片的话，切图方式简单而且效率较高，但如果有几十张几百张的图片拿来运用的话...不论是切图或者后期的修改都是噩梦。

方法二：Font-spider

什么是Font-spider：

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

中文字体动辄10M+的大小，使我们无法直接引用字体文件。通俗地讲，font-spider，就是将HTML里使用到的文字，单独打包成一个新的字体文件。那么，究竟该如何具体操作呢？且看以下讲解。

如何使用Font-spider

第一步:安装font-spider

使用Node.js安装font-spider:

npm install font-spider -g

（注：Node.js下载地址：https://nodejs.org/en/）

第二步:在项目中使用webfond

项目目录：

在HTML里引入font.css

声明一个新的字体，我们把它命名为”FZ”。

第三部：运行运行 font-spider 命令：

font-spider demo.html

我们可以发现页面依赖的字体将会自动压缩好，将1986KB的字体文件压缩成几KB的新字体，而且会根据不同浏览器的兼容性打包成不同类型的文件。

原字体会也会备份，我们看一下生成后的目录结构：

压缩后出现4个字体文件，我们在CSS中已经引入。而我们的原文件会备份到.font-spider这个目录下。

执行后的效果：

如何使用自动化构建工具gulp实时自动编译？

在真实的开发中，我们肯定不想每次保存代码后都去命令行输入font-spider命令去编译，这个时候就需要依靠自动化构建工具去做实时编译。

这里我们推荐使用gulp（因为上手很简单）。

第一步：安装gulp

没有安装过gulp的同学，使用NPM在全局下安装Gulp。

npm install --global gulp

在项目根目录下，将gulp、gulp-font-spider、gulp-watch作为项目开发依赖（devDependencies）安装：

npm install gulp gulp-font-spider --save-dev

（注①：gulp-font-spider是font-spider基于gulp的插件）

（注②：gulp-watch可以监听文件的保存）

第二步：配置gulp

在项目根目录下创建gulpfile.js文件。

1.引入gulp、gulp-font-spider、gulp-watch这三个项目开发依赖。

2.配置gulp-font-spider、和gulp-watch监听demo.html从而自动执行font-spider。

此时的项目目录结构：

第三步：执行gulp命令

此时我们将H1标签的内容改为“我在正在使用Gulp！”并保存。

返回命令行工具，我们会发现gulp已经帮我们自动执行了font-spider。

看一下效果：

更多精彩内容请进入技术知识库！

如何在网页中解决设计师留给你的字体问题？