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爲基礎，也是一種原始格式，但提供更多的功能。
　瀏覽器支持：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.com/
font-face generator：https://everythingfonts.com/font-face（轉化後獲得的格式很全，eot,ttf,woff,woff2,svg）
Online Font Converter:http://onlinefontconverter.com/
font2web
更多轉換工具可參考地址：http://blog.csdn.net/xiaolongtotop/article/details/8316554

特殊字體已經在你的電腦中了，如今咱們須要想辦法得到@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/fsjohnhuang/p/4320083.html
http://www.w3cfuns.com/article-5597432-1-1.html