font-face是css3中允許使用自定義字體的一個模塊唉韭，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中壶硅。到了今天這個時代自定義字體會越來越常用全封，因為前端自動化可以壓縮中文未使用到的字體，從而減小中文字體文件體積森爽，讓更多的字體運用到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]加載字體搓译，可以是相對路徑悲柱，可以是絕對路徑，也可以是網(wǎng)絡地址些己。[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 之前的版本會把問號之后的內(nèi)容當作 url 的參數(shù)动知。至于 #iefix 的作用皿伺，一是起到了注釋的作用，二是可以將 url 參數(shù)變?yōu)殄^點盒粮，減少發(fā)送給服務器的字符鸵鸥。
為何有兩個src？
絕大多數(shù)情況下丹皱，第一個 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）。
格式介紹
目前最主要的幾種網(wǎng)絡字體(web font)格式包括WOFF峰搪，SVG岔冀，EOT，OTF/TTF罢艾。
WOFF
WOFF是Web Open Font Format幾個詞的首字母簡寫楣颠。這種字體格式專門用于網(wǎng)上，由Mozilla聯(lián)合其它幾大組織共同開發(fā)咐蚯。WOFF字體通常比其它字體加載的要快些童漩，因為使用了OpenType (OTF)和TrueType (TTF)字體里的存儲結(jié)構和壓縮算法。這種字體格式還可以加入元信息和授權信息春锋。這種字體格式有君臨天下的趨勢矫膨，因為所有的現(xiàn)代瀏覽器都開始支持這種字體格式。
SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一種用矢量圖格式改進的字體格式期奔，體積上比矢量圖更小侧馅，適合在手機設備上使用。
EOT
Embedded Open Type呐萌。這是微軟創(chuàng)造的字體格式馁痴。這種格式只在IE6-IE8里使用。
OTF / TTF
OpenType Font 和 TrueType Font肺孤。部分的因為這種格式容易被復制(非法的)罗晕，這才催生了WOFF字體格式。然而赠堵，OpenType有很多獨特的地方小渊，受到很多設計者的喜愛。
