前端開發(fā)時經(jīng)常會碰到需要還原設(shè)計稿而帶來的兼容性的問題蜕青，有的問題可以根據(jù)不同的機型不同的系統(tǒng)做出調(diào)整，而有的問題則需要工程師有很深的功底才可解決糊渊，如何在不同的客戶端保證一致的效果也是前端工程師的一項基本能力右核。
如果有一天設(shè)計師設(shè)計了 500 字重的字體，那么渺绒，我們該如何實現(xiàn)呢贺喝？
首先菱鸥，碰到這個問題的時候我們應(yīng)該想到，有的客戶端系統(tǒng)預(yù)設(shè)是沒有 500 字重的躏鱼，也就是說設(shè)計師給出的 500 的字重效果相當(dāng)于 normal 的字重氮采。
那么我們該如何解決呢？
針對以上問題挠他，我們可以想到兩種方案：
將文本導(dǎo)成圖片
使用字體文件
我們下面來看看這兩種方法：
文本導(dǎo)成圖片
使用圖片代替文字扳抽，制作和維護(hù)的成本都很高。前期切圖并合并處理成雪碧圖比較繁瑣殖侵；后期修改和維護(hù)比較麻煩，還會帶來更多的帶寬的消耗镰烧；用戶也無法對文字進(jìn)行選擇拢军、復(fù)制等操作。
字體文件
通過 css 方式引入外部字體文件怔鳖，可使開發(fā)者在網(wǎng)頁中使用系統(tǒng)中沒有安裝的字體茉唉。只需將字體包安裝在服務(wù)器上，當(dāng)用戶加載網(wǎng)頁時结执，字體包會自動下載到用戶機器上度陆，保證字體能夠正確渲染。
但是由于中文數(shù)量太大献幔，導(dǎo)致中文包體積過大懂傀，通常會有幾 M 大小，不適合在項目中使用蜡感，尤其是移動端項目蹬蚁，由于字體加載緩慢，嚴(yán)重影響用戶體驗郑兴。
對于移動端項目犀斋，我們可以考慮使用自動化工具，來實現(xiàn)在移動端使用指定的字體情连。
如何引入外部字體文件叽粹？
可通過使用 @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 是為了解決瀏覽器兼容問題。
字體后綴和瀏覽器相應(yīng)關(guān)系禁筏，如下所示：
.TTF或.OTF持钉，適用于Firefox3.5、Safari篱昔、Opera
.EOT每强，適用于InternetExplorer4.0+
.SVG始腾，適用于Chrome、IPhone
使用時調(diào)用 font-family：
body{
font-family:'HansHandItalic';
font-size:16px;
}
使用 CSS 引入外部字體有什么好處呢空执？
使用的是真正的文本浪箭，而不是圖片，放大和縮小都不會影響渲染效果辨绊，用戶體驗好奶栖；
可以被搜索引擎辨認(rèn)；
不像圖片每次需要重新生成门坷，添加刪除更方便宣鄙。
現(xiàn)在我們來看看自動化工具：
Font-Spider
Font-Spider 是一個中文 WebFont 自動化壓縮工具，它能自動分析頁面 CSS 與 HTML 使用的 WebFont 并進(jìn)行按需壓縮默蚌，同時生成跨瀏覽器使用的格式冻晤。
我們在項目中可以直接使用 grunt 和 gulp 的插件實現(xiàn)壓縮。
/*聲明 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 文件必須存在绸吸，其余的格式將由工具自動生成
特性：
按需壓縮：從原字體中剔除沒有用到的字符鼻弧，可以將數(shù) MB 大小的中文字體壓縮成幾十 KB
簡單可靠：完全基于 HTML 與 CSS 分析進(jìn)行本地處理，無需 js 與服務(wù)端輔助
自動轉(zhuǎn)碼：將字體轉(zhuǎn)碼成所有瀏覽器支持的格式锦茁，包括老舊的 IE6 與現(xiàn)代瀏覽器
圖標(biāo)字體：除了常規(guī)的字體支持外攘轩，還支持圖標(biāo)字體（字蛛 v1.0.0 新特性）
使用場景限制：
僅支持固定的文本與樣式，不支持 javascript 動態(tài)插入的元素與樣式
.otf 字體需要轉(zhuǎn)換成 .ttf 才能被壓縮
僅支持 utf-8 編碼的 HTML 與 CSS 文件
