前端开发时经常会碰到需要还原设计稿而带来的兼容性的问题，有的问题可以根据不同的机型不同的系统做出调整，而有的问题则需要工程师有很深的功底才可解决，如何在不同的客户端保证一致的效果也是前端工程师的一项基本能力。
如果有一天设计师设计了 500 字重的字体，那么，我们该如何实现呢？
首先，碰到这个问题的时候我们应该想到，有的客户端系统预设是没有 500 字重的，也就是说设计师给出的 500 的字重效果相当于 normal 的字重。
那么我们该如何解决呢？
针对以上问题，我们可以想到两种方案：
将文本导成图片
使用字体文件
我们下面来看看这两种方法：
文本导成图片
使用图片代替文字，制作和维护的成本都很高。前期切图并合并处理成雪碧图比较繁琐；后期修改和维护比较麻烦，还会带来更多的带宽的消耗；用户也无法对文字进行选择、复制等操作。
字体文件
通过 css 方式引入外部字体文件，可使开发者在网页中使用系统中没有安装的字体。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。
但是由于中文数量太大，导致中文包体积过大，通常会有几 M 大小，不适合在项目中使用，尤其是移动端项目，由于字体加载缓慢，严重影响用户体验。
对于移动端项目，我们可以考虑使用自动化工具，来实现在移动端使用指定的字体。
如何引入外部字体文件？
可通过使用 @font-face 引入外部字体。
@font-face{
font-family:'HansHandItalic';
src:url('fonts/hanshand-webfont.eot');
src:url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/hanshand-webfont.woff') format('woff'),
url('fonts/hanshand-webfont.ttf') format('truetype'),
url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
font-weight:normal;
font-style:normal;
}
font-family 表示自定义字体的名字，src 表示加载字体文件的位置，多个 url 是为了解决浏览器兼容问题。
字体后缀和浏览器相应关系，如下所示：
.TTF或.OTF，适用于Firefox3.5、Safari、Opera
.EOT，适用于InternetExplorer4.0+
.SVG，适用于Chrome、IPhone
使用时调用 font-family：
body{
font-family:'HansHandItalic';
font-size:16px;
}
使用 CSS 引入外部字体有什么好处呢？
使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；
可以被搜索引擎辨认；
不像图片每次需要重新生成，添加删除更方便。
现在我们来看看自动化工具：
Font-Spider
Font-Spider 是一个中文 WebFont 自动化压缩工具，它能自动分析页面 CSS 与 HTML 使用的 WebFont 并进行按需压缩，同时生成跨浏览器使用的格式。
我们在项目中可以直接使用 grunt 和 gulp 的插件实现压缩。
/*声明 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 文件必须存在，其余的格式将由工具自动生成
特性：
按需压缩：从原字体中剔除没有用到的字符，可以将数 MB 大小的中文字体压缩成几十 KB
简单可靠：完全基于 HTML 与 CSS 分析进行本地处理，无需 js 与服务端辅助
自动转码：将字体转码成所有浏览器支持的格式，包括老旧的 IE6 与现代浏览器
图标字体：除了常规的字体支持外，还支持图标字体（字蛛 v1.0.0 新特性）
使用场景限制：
仅支持固定的文本与样式，不支持 javascript 动态插入的元素与样式
.otf 字体需要转换成 .ttf 才能被压缩
仅支持 utf-8 编码的 HTML 与 CSS 文件
