關於@font-face的使用

　　以前在寫網頁的時候，總是使用瀏覽器默認的字體，因此從未使用過@font-face，然而，最近在做官網的時候，UI規定了字體，要在所有瀏覽器下都展現同一效果。多番查詢下，發現@font-face用起來是比較容易的。

　　首先我們在使用某一特定字體的時候，需要先下載字體的源文件，例如方正北魏楷書簡體（FZBWKSJW），方正蘭亭特黑長簡體等等，常用的字體格式有：.eot、.svg、.ttf、.woff這四種。　　

　　引自w3c的一段話：

　　　　Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 規則.

　　　　但是, Internet Explorer 9 只支持 .eot 類型的字體, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 與.otf 兩種類型字體.

　　　　注意： Internet Explorer 8 及更早IE版本不支持@font-face 規則.

　　

　　現在，假如，有.woff格式的文件，可以將其轉換為其他三種格式的文件，這里推薦一個很好用的 在線字體轉換網站 。然后選擇你所需要的字體格式進行轉換。轉換完后，會自動下載。

 

　　使用：

　　例如：在index.html文件中使用方正北魏楷書簡體（FZBWKSJW），那么可以這樣做：

<style>
    @font-face {
        font-family: myFont;
        src: url("./fonts/FZBWKSJW.ttf"),
             url("./fonts/FZBWKSJW.eot");
     }

      .txt {
         font-family: myFont;
      }
</style>    

　　其中，@font-face里面的font-family用於定義字體的名稱（必需的），src定義字體所存放的路徑。

 

　　注意：同一網頁中可定義多個@font-face，這樣在同一網頁中就可以使用多種字體了。