@font-face是CSS3中的(de)一個(gè)模塊，他(tā)主要是把自己定義的(de)Web字體嵌入到你的(de)網頁中，随著(zhe)@font-face模塊的(de)出現，我們在Web的(de)開發中使用(yòng)字體不怕隻能使用(yòng)Web安全字體，你們當中或許有許多(duō)人(rén)會不自然的(de)問，這(zhè)樣的(de)東西IE能支持嗎？當我告訴大(dà)家@font-face這(zhè)個(gè)功能早在IE4就支持了(le)你肯定會感到驚訝。我的(de)Blog就使用(yòng)了(le)許多(duō)這(zhè)樣的(de)自定義Web字體，比如說首頁的(de)Logo，Tags以及頁面中的(de)手寫英文體，很多(duō)朋友問我如何使用(yòng)，能讓自己的(de)頁面也(yě)支持這(zhè)樣的(de)自定義字體，一句話(huà)這(zhè)些都是@font-face實現的(de)，爲了(le)能讓更多(duō)的(de)朋友知道如何使用(yòng)他(tā)，今天我主要把自己的(de)一點學習(xí)過程貼上來(lái)和(hé)大(dà)家分(fēn)享。
首先我們一起來(lái)看看@font-face的(de)語法規則：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
取值說明(míng)
1、YourWebFontName:此值指的(de)就是你自定義的(de)字體名稱，最好是使用(yòng)你下(xià)載的(de)默認字體，他(tā)将被引用(yòng)到你的(de)Web元素中的(de)font-family。如“font-family:"YourWebFontName";”
2、source:此值指的(de)是你自定義的(de)字體的(de)存放路徑，可(kě)以是相對(duì)路徑也(yě)可(kě)以是絕路徑；
3、format：此值指的(de)是你自定義的(de)字體的(de)格式，主要用(yòng)來(lái)幫助浏覽器識别，其值主要有以下(xià)幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和(hé)style:這(zhè)兩個(gè)值大(dà)家一定很熟悉，weight定義字體是否爲粗體，style主要定義字體樣式，如斜體。
一、TureTpe(.ttf)格式：
.ttf字體是Windows和(hé)Mac的(de)最常見的(de)字體，是一種RAW格式，因此他(tā)不爲網站優化(huà),支持這(zhè)種字體的(de)浏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字體被認爲是一種原始的(de)字體格式，其内置在TureType的(de)基礎上，所以也(yě)提供了(le)更多(duō)的(de)功能,支持這(zhè)種字體的(de)浏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字體是Web字體中最佳格式，他(tā)是一個(gè)開放的(de)TrueType/OpenType的(de)壓縮版本，同時(shí)也(yě)支持元數據包的(de)分(fēn)離,支持這(zhè)種字體的(de)浏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字體是IE專用(yòng)字體，可(kě)以從TrueType創建此格式字體,支持這(zhè)種字體的(de)浏覽器有【IE4+】；
五、SVG(.svg)格式：
.svg字體是基于SVG字體渲染的(de)一種格式,支持這(zhè)種字體的(de)浏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
這(zhè)就意味著(zhe)在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還(hái)需要.svg等字體達到更多(duō)種浏覽版本的(de)支持。
