首先我們一起來(lái)看看@font-face的語(yǔ)法規(guī)則：

   @font-face {

      font-family: <YourWebFontName>;

      src: <source> [<format>][,<source> [<format>]]*;

      [font-weight: <weight>];

      [font-style: <style>];

    }

取值說(shuō)明

1、YourWebFontName:此值指的就是你自定義的字體名稱(chēng)，最好是使用你下載的默認(rèn)字體，
他將被引用到你的Web元素中的font-family。如"font-family:"YourWebFontName";"

2、source:此值指的是你自定義的字體的存放路徑，可以是相對(duì)路徑也可以是絕路徑；

3、format：此值指的是你自定義的字體的格式，主要用來(lái)幫助瀏覽器識(shí)別，
其值主要有以下幾種類(lèi)型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:這兩個(gè)值大家一定很熟悉，weight定義字體是否為粗體，
style主要定義字體樣式，如斜體。

普及下各個(gè)系統(tǒng)中瀏覽器的字體格式：

一、TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最常見(jiàn)的字體，是一種RAW格式，
因此他不為網(wǎng)站優(yōu)化,支持這種字體的瀏覽器有
【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，
所以也提供了更多的功能,支持這種字體的瀏覽器有
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個(gè)開(kāi)放的TrueType/OpenType的壓縮版本，
同時(shí)也支持元數(shù)據(jù)包的分離,支持這種字體的瀏覽器有
【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字體是IE專(zhuān)用字體，可以從TrueType創(chuàng)建此格式字體,支持這種字體的瀏覽器有【IE4+】；

五、SVG(.svg)格式：

.svg字體是基于SVG字體渲染的一種格式,支持這種字體的瀏覽器有
【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，
甚至還需要.svg等字體達(dá)到更多種瀏覽版本的支持。

為了讓更多的瀏覽器支持大家可以使用下面的寫(xiě)法：

@font-face {

font-family: ’你的字體名字’;

src: url(’你的字體名字.eot’); /* IE9 Compat Modes */

src: url(’你的字體名字.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */

             url(’你的字體名字.woff’) format(’woff’), /* Modern Browsers */

             url(’你的字體名字.ttf’)  format(’truetype’), /* Safari, Android, iOS */

             url(’你的字體名字.svg#YourWebFontName’) format(’svg’); /* Legacy iOS */

   }

使用的時(shí)候替換寫(xiě)法中的’你的字體名字’對(duì)于你自己的字體名字就ok啦，不要命名中文哦。