前端開發時經常會碰到需要還原設計稿而帶來的兼容性的問題，有的問題可以根據不同的機型不同的系統做出調整，而有的問題則需要工程師有很深的功底才可解決，如何在不同的客戶端保證一致的效果也是前端工程師的一項基本能力。
如果有一天設計師設計了 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 文件
