CSS3新特性(04)：@font-face

@font-face是CSS3新特性中的一個模塊，今天就來介紹下它。它主要是把自定義的Web字體嵌入到你的網頁中。說白了就是可以幫助你在網頁上使用漂亮的特殊字體，即非Web安全字體.

而不用擔心，你的網頁發佈以後，瀏覽者的電腦萬一沒安裝這個字體就壞事了的情況。一般不是專業從業人員，如設計師，普通網友的字體庫是不會裝太多字體的。所以@font-face就派上用處了。

@font-face怎麼用？

(1)@font-face的語法：

@font-face {
    font-family: 'Your Web Font Name';
    font-weight:normal;
    src: url('fonts/YourWebFontName.eot');
    src: url('fonts/YourWebFontName.eot') format('eot'),
         url('fonts/YourWebFontName.woff2') format('woff2'),
         url('fonts/YourWebFontName.woff') format('woff'),
         url('fonts/YourWebFontName.ttf') format('ttf'),
         url('fonts/YourWebFontName.svg') format('svg');
}
 
p { font-family: 'Your Web Font Name', serif; }

當然還有這種寫法的：

@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
src:local('YourWebFontName'),
    url('fonts/YourWebFontName.woff2') format('woff2'),
    url('fonts/YourWebFontName.woff') format('woff'),
    url('fonts/YourWebFontName.ttf') format('ttf'),
    url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
}
p { font-family: 'Your Web Font Name', serif; }

（2）語法解析YourWebFontName：指你自定義字體的名稱，最好使用你下載字體的默認名稱，他將被引用到你Web元素中的font-family裏。url：裏面填你下載要用字體的絕對或相對地址。比如url('../gebz/pts55f-webfont.woff')。format('woff')：括號中填字體的格式，主要用於幫助瀏覽器識別。一般有ttf,otf,woff,eot,svg幾種常見字體格式，這個下面會介紹）。

第二種寫法中的local是一種hack的手法。目的是保護IE瀏覽器。如果沒有這句，IE會嘗試將第二個src描述符的值讀作一個路徑，並向服務器發出一個額外無用的請求。特地寫了第一個src的目的也是爲了保證IE能讀到正確路徑。具體可參看《CSS3實用指南》ZM. Gillenwater. 頁碼P112-P114。

另外這種寫法在Android系統中會有BUG，感興趣的同學可以看看《BestPracticeFor@Font-Face》。改進方法可以寫兩個@font-face,一個兼容IE，另一個非IE。比如：

@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
}
 
@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src: url(//:) format("no404"),
     url('fonts/YourWebFontName.woff2') format('woff2'),
     url('fonts/YourWebFontName.woff') format('woff'),
     url('fonts/YourWebFontName.ttf') format('ttf'),
     url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
 
}
p { font-family: 'Your Web Font Name', serif; }

url(//:)format("no404")是一種Bulletproof寫法，感興趣的同學可看《New@Font-FaceSyntax:Simpler,Easier》一文。另外，爲了使@font-face達到更多的瀏覽器支持，PaulIrish寫了一個獨特的@font-face語法叫《Bulletproof@font-face》。

字體格式以及支持的瀏覽器

• TureType(.ttf)格式
  (.ttf)字體是Windows和Mac的最常見字體，是一種RAW格式，因此他不爲網站優化，支持這種字體的瀏覽器有:
  (IE9+,FF3.5+ Chrome4+,Safari3+,Opera10+,IOSMobileSafari4.2+）

• OpenType(.otf)格式
  (.otf)字體被認爲是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能，支持這種字體的瀏覽器有：
  （FF3.5+ ,Chrome4.0+,Safari3.1+,Opera10.0+,IOSMobile Safari4.2+）

• Web Open Font Format(.woff)格式
  (.woff)字體是Web字體中最佳格式，可以看作是 TrueType、OpenType 字體數據的簡單重新封裝，不過內建了壓縮功能，因而體積更小、方便下載和傳播。另外還支持元數據，所以廠商可以在他們的字體中加入相關識別信息。支持這種字體的瀏覽器有：
  （IE9+,FF3.5+,Chrome6+,Safari3.6,Opera11.1+）

• Embedded Open Type(.eot)格式
  (.eot)字體是IE的專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有：（IE4+）

• SVG（.svg）格式
  （.svg）字體是基於SVG字體渲染的一種格式，支持這種字體的瀏覽器有：
  （Chrome4+,Safari3.1+,Opera10.0+,ISO MobileSafari3.2+）

內容	IE6IE7IE8	FF3.5+	Chrome	Safari	Opera
.ttf,.otf	不支持	支持	支持	支持	支持
.eot	支持	不支持	不支持	不支持	不支持
.svg	不支持	不支持	支持	支持	支持
woff	不支持	支持	支持	支持	支持

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有瀏覽器的完美支持。
當然這些不同的字體格式哪裏來呢？網上有一些專門的字體格式轉換的網站。

在線字體格式轉換網站

（1）Fontsquirrel
主要是英文字體轉換，上傳你已有的字體格式以後，進行轉換就可以得到一個裝有多種字體的壓縮文件，解壓縮後，裏面除了@font-face所需要的衆字體格式外，還帶有一個DEMO文件，不明白怎麼使用的，可以看一下這個DEMO文件，但千萬別複製DEMO文件，要不然我上面的語法解析就白講了。

上傳你的字體文件，然後選擇中間的OPTIMAL推薦最佳格式，然後就可以轉換了。

（2）EveryThingFonts
當上面的Fontsquirrel網登不上用不了時，可以選擇在EveryThingFonts網試一試，可以下載中文字體，是我新發現的在線字體格式轉換網站，也是我最近常用的工具，非常推薦，比Fontsquirrel網穩定。鼠標滑塊將No滑爲Yes，點擊Pick Font File上傳你已有的字體，然後點擊Convert進行轉換即可。

@font-face使用小結

如果你的項目中是英文網站，而且項目中的LOGO，TAGS等應用到較多的特殊字體效果，則比較建議用@font-face，但如果是中文網站，還是使用圖片比較合適，因爲加載英文字體和圖片沒多大區別，但是加載中文字體可能會影響性能優化，因爲中文一套字體一般要3-6M，這樣的龐然大物嵌入網頁上，結果可想而知，在頁面加載完成前已經被關掉了。

當然，不是說中文就無法通過@font-face實現嵌入，但需要再麻煩一步：按需截取（根據文章所涉及到的文字生成小字庫），中文的無論如何都要先截取一下的。如此便能最大程度地節約流量，將字體減到最小。

看到漂亮字體不知是啥字體咋辦？

最後推薦一個用圖片搜索字體的網站——求字網，你一定碰到過這樣的情況，看到某個網站使用了很漂亮的字體，想知道是什麼字體？除了可以查閱源代碼獲取，還可以將文字截成圖片，放到求字網上去匹配搜索，當然我更建議使用源代碼，因爲有時求字網數據庫不夠全會找不到答案。