@font-face是CSS3中的一個(gè)模塊量承，他主要是把自己定義的web字體嵌入到你的網(wǎng)頁(yè)中
1好唯、@font-face語(yǔ)法規(guī)則
@font-face{
font-family:<Your Web Font Name>;
src:source format字體格式
font-weight:weight
font-style:style;
}
（1）your web font name：此值指的是自己定義的字體名稱，最好少下載的默認(rèn)字體筒主。
（2）source：此值指的是你自己定義的字體存放路徑
（3）format：指的是你自定義的字體格式关噪，主要用來(lái)幫助瀏覽器識(shí)別。
2乌妙、說(shuō)到瀏覽器對(duì)@font-face的兼容問題使兔，這里涉及到一個(gè)字體format的問題，因?yàn)椴煌臑g覽器對(duì)字體格式支持是不一致的藤韵，這樣大家有必要了解一下虐沥，各種版本的瀏覽器支持什么樣的字體，前面也簡(jiǎn)單帶到了有關(guān)字體的幾種格式泽艘，下面我就分別說(shuō)一下這個(gè)問題欲险，讓大家心里有一個(gè)概念：
（1）TureTpe(.ttf)格式：.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式匹涮，因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】天试；
（2） OpenType(.otf)格式：.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上然低，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】喜每；
（3） Web Open Font Format(.woff)格式：.woff字體是Web字體中最佳格式，他是一個(gè)開放的TrueType/OpenType的壓縮版本雳攘，同時(shí)也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】带兜；（4） Embedded Open Type(.eot)格式：.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有【IE4+】吨灭；
（5） SVG(.svg)格式：.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】刚照。這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達(dá)到更多種瀏覽版本的支持喧兄。
3无畔、支持更多瀏覽器的寫法
@font-face{
font-family:your web font name;
src:url('your web font name.eto' ) format('eto'); //IE
src:url('your web font name.woff') format('woff') ,url('your web font name.tff') format('truetype'); //non-IE
}
更多瀏覽器支持
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
