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

1、語法規(guī)則


2、取值說明

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

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

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

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

3、各個瀏覽器需要字體的格式

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

(3)Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數(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等字體達到更多種瀏覽版本的支持。

4、綜合寫法


5、獲取字體

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

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

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

如果你進入頁面沒有看到上圖，你可以直接點擊導航:

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

上傳后按下圖所示操作：

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

解壓縮出來的文件格式，里面除了@font-face所需要的字體格式外，還帶有一個DEMO文件，如果你不清楚的也可以參考下載下來的DEMO文件，我在這里不對DEMO說明問題，我主要是給大家介紹如何把下載下來的文件有價值的運用到我們的項目中。

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

@font-face就為大家介紹到這里，更多CSS3的事兒盡請關注本blog。若有啥建議也請在下面留言喲，我會努力改正，力求最好的。

最新評論