豐富多彩的css3個性化字體

製作頁面的時候，我們常用「font-family 」來定義字體，然而我們用「font-family 「定義的字體在使用者的瀏覽器中是否可以呈現取決於使用者的電腦上是否有安裝我們定義的字型。在網路上我們經常可以看到國外的一些網站使用了一些不常見而又很漂亮的字體，而這些字體用戶的電腦上一般是沒有安裝的，那麼我們今天就來介紹下如何在頁面中使在使用者電腦上沒有安裝的字型。

css3 @font-face

說@font-face是CSS3的新屬性其實是不準確的，因為在CSS2就已經支援這一特性了，而IE5就已經開始支持了，不過在ie中實現的方式是透過eot字體格式，遺憾的是其他瀏覽器不支援這個格式。

在網頁中，我們可以用CSS的font-family屬性來定義字體，然而定義的字體在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字體。我們常常可以看到國外一些個人的網站使用了非常漂亮的字體，而這些字體通常在使用者的電腦中是沒有安裝的，所以用font-family屬性就無法實現了，今天我們就介紹使用@font- face實現個性化字體。

CSS3 @font-face

說@font-face是CSS3的新特性並不準確，因為CSS2已經支援了這個特性，而Internet Explorer早在第5版的時候就已經支援它了，不過IE實作方式是透過自有的eot(Embeded Open Type)字型格式，其它瀏覽器都不支援這個格式。 @font-face支援以下屬性：

　　font-family：設定文字的字體名稱。
　　font-style：設定文字樣式。
　　font-variant：設定文字是否大小寫。
　　font-weight：設定文字的粗細。
　　font-stretch：設定文字是否橫向的拉伸變形。
　　font-size：設定文字字體大小。
　　src：設定自訂字體的相對路徑或絕對路徑。
　　@font-face瀏覽器相容性如下：
 

#一個簡單範例

先宣告一個名為ChantelliAntiquaRegular的字體，有一個老的寫法是這樣的：

#

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

第一個src是相容IE，第二個src是相容於其它瀏覽器。 local("☺")是一種hack寫法，避免從客戶端載入字體，這種寫法在Android系統中有BUG，改進方案是宣告兩個@font-face，如下：

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

我們首先聲明一個引用eot字體檔案的@font-face，以確保它在IE中能正常工作，第二個@font-face引用了多個字體格式是為了兼容其它瀏覽器，它們將按順序查找，直到找到支援的格式，這表示同一個字體需要有多個格式。 url(//:) format("no404")是一種Bulletproof寫法。

其它的HTML與CSS程式碼如下：
 

#

.font-face-display {
    font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}
 
<p class="font-face-display">Take me to your heart</p>

最重效果如下：

免費字體網站Font Squirrel

　　Font Squirrel是一個非常優秀的免費字體資源網站，收集了許多高品質字體供網頁設計者免費下載，還有個字體格式生成工具@font-face generator，上傳一個字體文件，可以產生多種字體格式及CSS程式碼，非常有用。如果你需要一些優秀的免費英文字體，這是個好去處。

　　想要豐富多彩的頁面就需要有更多的字體樣式，人們想出了很多字體替代方案，除了@font-face方案外還有sIFR、 Cufon、Typeface.js等，還有.webfont，簡單說，.webfont 就是在字體中嵌入了訪問許可表，瀏覽器可以讀出這些許可信息，並決定是否應該下載和渲染這些字體。另外還有Typekit也是值得關注的方案，將字體放在第三方伺服器上供呼叫。這些方案的優缺點，將在以後做詳細的介紹。

以上是豐富多彩的css3個性化字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！