font-face是css3中允許使用自定義字體的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中。到了今天這個時代自定義字體會越來越常用，因為前端自動化可以壓縮中文未使用到的字體，從而減小中文字體文件體積，讓更多的字體運用到web上。
字蛛支持grunt和gulp自動化構建工具，官方地址：字蛛
屬性介紹
言歸正傳，先看下font-face的基本用法。
@font-face {
font-family: <YourDefineFontName>;
src: <url> [<format>],[<source> [<format>]], *;
[font-weight: <weight>];
[font-style: <style>];
}
帶中括號的屬性為非必須選項。
font-family：為載入的字體取名字。
src：[url]加載字體，可以是相對路徑，可以是絕對路徑，也可以是網絡地址。[format]定義的字體的格式，用來幫助瀏覽器識別。主要取值為：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
font-weight：定義加粗樣式。
font-style：定義字體樣式。
format對應字體格式 以及 常見兼容性寫法：
@font-face {
font-family: 'defineName';
src: url('../fonts/singlemalta-webfont.eot');
src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/singlemalta-webfont.woff') format('woff'),
url('../fonts/singlemalta-webfont.ttf') format('truetype'),
url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
font-weight: normal;
font-style: normal;
}
#iefix有何作用？
IE9 之前的版本沒有按照標準解析字體聲明，當 src 屬性包含多個 url 時，它無法正確的解析而返回 404 錯誤，而其他瀏覽器會自動采用自己適用的 url。因此把僅 IE9 之前支持的 EOT 格式放在第一位，然后在 url 后加上 ?，這樣 IE9 之前的版本會把問號之后的內容當作 url 的參數。至于 #iefix 的作用，一是起到了注釋的作用，二是可以將 url 參數變為錨點，減少發送給服務器的字符。
為何有兩個src？
絕大多數情況下，第一個 src 是可以去掉的，除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染頁面，微軟修改了在兼容模式下的 CSS 解析器，導致使用 ? 的方案失效。由于 CSS 解釋器是從下往上解析的，所以在上面添加一個不帶問號的 src 屬性便可以解決此問題。
引用來自夢幻雪冰博客。
把字體加載進來以后就可以使用了，使用方式很簡單,font-family引入即可生效。
body {
font-family: defineName;
}
兼容性
IE6-8僅支持 embedded-opentype（.eot）。
firefox3.5支持truetype（.ttf）、opentype（.otf）。
firefox3.6支持truetype（.ttf）和opentype（.otf）、WOFF（.woff）。
chrome支持truetype（.ttf）、opentype（.otf）、WOFF（.woff）、svg（.svg）。
safari支持truetype（.ttf）、opentype（.otf）、WOFF（.woff）、svg（.svg）。
opera支持truetype（.ttf）、opentype（.otf）、WOFF（.woff）、svg（.svg）。
格式介紹
目前最主要的幾種網絡字體(web font)格式包括WOFF，SVG，EOT，OTF/TTF。
WOFF
WOFF是Web Open Font Format幾個詞的首字母簡寫。這種字體格式專門用于網上，由Mozilla聯合其它幾大組織共同開發。WOFF字體通常比其它字體加載的要快些，因為使用了OpenType (OTF)和TrueType (TTF)字體里的存儲結構和壓縮算法。這種字體格式還可以加入元信息和授權信息。這種字體格式有君臨天下的趨勢，因為所有的現代瀏覽器都開始支持這種字體格式。
SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一種用矢量圖格式改進的字體格式，體積上比矢量圖更小，適合在手機設備上使用。
EOT
Embedded Open Type。這是微軟創造的字體格式。這種格式只在IE6-IE8里使用。
OTF / TTF
OpenType Font 和 TrueType Font。部分的因為這種格式容易被復制(非法的)，這才催生了WOFF字體格式。然而，OpenType有很多獨特的地方，受到很多設計者的喜愛。
