备注
设计人员设计的效果图，有时候会出现一些特殊字体。WebFont技术提供了在网页使用特殊字体的可能，从而避免用图片的方法。它的实现方法是通过CSS的@font-face引入字体。很多互联网公司已经率先采用了这种方法，比如Apple官网就是采用了自己的字体。Google也推出了免费的WebFont云托管服务，在国外网站自定义字体得到很好的应用。
英文字体文字部分由26个字母组成，所以字体文件通常不会太大;而中文汉字数量总共约有九万左右， 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据，常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小，参照现在中国的网络环境，显然不适合在项目中使用。
针对中文字体，就可以将用到的所有文字汇总出来，用特殊工具将字体文件压缩，只保留使用的文字。
字蛛
安装
1、先安装node.js。到Nodejs中文网(http://nodejs.cn/)下载并安装。
2、在命令行（cmd）中输入命令：npm install font-spider -g 安装字蛛。
使用
1、在某个目录中新建目录结构（eg：d:/fonts/minicartoon/demo.html），将相应的css文件，ttf字体文件和html文件放到相应的位置。
备注：
- @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
- 开发阶段请使用相对路径的 CSS 与 WebFont
2、编写css文件如下：
@charset ‘utf-8‘;
/*声明 WebFont*/
@font-face {
font-family: ‘minicartoon‘;
src: url(‘../font/minicartoon.eot‘);
src:
url(‘../font/minicartoon.eot?#font-spider‘) format(‘embedded-opentype‘),
url(‘../font/minicartoon.woff‘) format(‘woff‘),
url(‘../font/minicartoon.ttf‘) format(‘truetype‘),
url(‘../font/minicartoon.svg‘) format(‘svg‘);
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: ‘minicartoon‘;
}
3、编写html文件，将用到的所有的文字汇总到文件中，引入css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>minicartoon demo</title>
<link rel="stylesheet" href="css/font.css">
</head>
<body>
<div class="home">
<h1>迷你简卡通</h1>
</div>
<div class="demo">
<div class="test">
尊敬的m*********，
我们初识于2014年6月18日，我们结缘已365天了！我们还会继续相伴“钱”行！
您还没参与过红筹活动，
您难道不想成为一名安静的美土豪吗？
马上赚钱
您还没参与过白拿活动,
为什么白给的，您都不要呢？
立即省钱
与您相遇，是最美的记忆；
伴您“钱”行，是我们最终的目的！
让我们在新的一年里，扬帆，远航！
炫耀一下
独具慧眼
我会赚钱
我会省钱
更多精彩
您于2014年6月18日，
第一次参与赚钱！
到现在您已赚了8888888888元！
您于2014年6月18日，
第一次参与白拿！
到现在您已白拿了3333元的商品！
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
./*-+/.,;''"":|_!~`@#$%^&*()<>
《》？：“；：”|{}[]~`!@#$%^&*()_+
</div>
</div>
</body>
</html>
4、win + R，输入cmd打开命令行。切换到相应的目录，运行命令：font-spider ./demo/*.html。 如下：
d:
cd fonts/minicartoon
font-spider ./demo.html
test