現(xiàn)在CSS3已經(jīng)很流行了。傳說(shuō)中的CSS3基本上什么都可以，那么CSS3中可不可以自定義英文字體呢?答案是非?？梢浴Ｓ聾font-face即可實(shí)現(xiàn)自定義英文字體，下面咱們一起去看看吧。

1、語(yǔ)法規(guī)則


2、取值說(shuō)明

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

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

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

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

3、各個(gè)瀏覽器需要字體的格式

(1)TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最常見(jiàn)的字體，是一種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á)到更多種瀏覽版本的支持。

4、綜合寫法


5、獲取字體

(1)去一些下載字體的網(wǎng)站進(jìn)行下載你想要的英文字體

(2)然后去這里→http://www.fontsquirrel.com/tools/webfont-generator獲取所需格式

(3)進(jìn)入上面的網(wǎng)址的界面

如果你進(jìn)入頁(yè)面沒(méi)有看到上圖，你可以直接點(diǎn)擊導(dǎo)航:

如果你看到了上面的界面，那就好辦了，我們來(lái)看如何應(yīng)用這個(gè)工具生成@font-face需要的各種字體，先把我們剛才下載的字體上傳上去：

上傳后按下圖所示操作：

現(xiàn)在從Font Squirrel下載下來(lái)的文件已經(jīng)保存在你本地的電腦上了，接著只要對(duì)他進(jìn)行解壓縮，你就能看到文件列表如下所示：

解壓縮出來(lái)的文件格式，里面除了@font-face所需要的字體格式外，還帶有一個(gè)DEMO文件，如果你不清楚的也可以參考下載下來(lái)的DEMO文件，我在這里不對(duì)DEMO說(shuō)明問(wèn)題，我主要是給大家介紹如何把下載下來(lái)的文件有價(jià)值的運(yùn)用到我們的項(xiàng)目中。

最后在提醒一下，使用@font-face別的可以忘了，但千萬(wàn)不能忘生成各種格式的字體，因?yàn)檫@樣能幫助你兼容各個(gè)瀏覽器。最后只得注意的是，如果你的項(xiàng)目中是英文網(wǎng)站，而且項(xiàng)目中可以用這種特殊字體效果，但是你是中文網(wǎng)站，我覺(jué)得還是使用圖片比較合適。

@font-face就為大家介紹到這里，更多CSS3的事兒盡請(qǐng)關(guān)注本blog。若有啥建議也請(qǐng)?jiān)谙旅媪粞詥?，我?huì)努力改正，力求最好的。