css網頁中導入特殊字體@font-face屬性詳解

@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中。

語法規則

首先我們一起來看看@font-face的語法規則：

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

font-family: <YourWebFontName> ：自定義字庫名稱（一般設置爲所引入的字庫名），後續樣式規則中則通過該名稱來引用該字庫。
src ：設置字體的加載路徑和格式，通過逗號分隔多個加載路徑和格式
srouce ：字體的加載路徑，可以是絕對或相對URL。
format ：字體的格式，主要用於瀏覽器識別，一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。 
src屬性後還有一個 local(font name) 字段，表示從用戶系統中加載字體，失敗後才加載webfont。

src: local(font name), url("font_name.ttf")

兼容瀏覽器

字體格式　

對於@font-face而言，兼容性問題就是各瀏覽器所能識別的字體格式不盡相同。
TrueType格式(.ttf)
Windows和Mac上常見的字體格式，是一種原始格式，因此它並沒有爲網頁進行優化處理。
　瀏覽器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf)
　以TrueType爲基礎，也是一種原始格式，但提供更多的功能。<br/>
　瀏覽器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff)
　針對網頁進行特殊優化，因此是Web字體中最佳格式，它是一個開放的TrueType/OpenType的壓縮版，同時支持元數據包的分離。
　瀏覽器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)
IE專用字體格式，可以從TrueType格式創建此格式字體。
　瀏覽器支持：IE4+

SVG格式(.svg)
基於SVG字體渲染的格式。
瀏覽器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

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

爲了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:

 @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 */
   }

獲取Web字體　

到Google Web Fonts和Dafont.com下載.ttf格式字體，然後通過Font Squirrel來生成.woff等格式的字體。
以下站點也可以獲取Web字體：
http://webfonts.fonts.com/
http://typekit.com/
http://kernest.com/
http://nicewebtype.com/fonts/

@font-face文件轉換

這裏推薦幾個@font-face文件轉換網站：
freefontconverter:http://www.freefontconverter....
font-face generator：https://everythingfonts.com/f...
Online Font Converter:http://onlinefontconverter.com/
font2web
更多轉換工具可參考地址：http://blog.csdn.net/xiaolong...

特殊字體已經在你的電腦中了，現在我們需要想辦法獲得@font-face所需的.eot,.woff,.ttf,.svg字體格式。要獲取這些字體格式，我們同樣是需要第三方工具或者軟件來實現，下面我給大家推薦一款常用的一個工具fontsquirrel

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

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

上傳後按下圖所示操作：

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

到這裏爲止，我們已經通過@font-face自定義好所需的SingleMalta字體，離最後效果只差一步了，就是把自己定義的字體應用到你的Web中的DOM元素上：

h2.singleMalta {     
  font-family: 'YourWebFontName'   
}

參考地址：
http://www.cnblogs.com/fsjohn...
http://www.w3cfuns.com/articl...