@font-face是CSS3中的一個模組，它主要是把自己定義的Web字體嵌入到你的網頁中，隨著@font-face模組的出現，我們在Web的開發中使用字體就不用再為只能使用Web安全字體煩惱了！一定會有人問，這樣的東西IE能支持嗎？我告訴大家@font-face這個功能其實早在IE4就支援了，你一定會感到驚訝。如果你看到一些英文網站或blog看到一些很漂亮的自訂Web字體，比如說首頁的Logo，Tags以及頁面中的手寫英文體，一句話這些都是@font-face實現的。
首先我們一起來看看@font-face的語法規則：
@font- face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | < font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
取值說明：
font-family：設定文字的字體名稱。
font-style：設定文字樣式。
font-variant：設定文字是否大小寫。
font-weight：設定文字的粗細。
font-stretch：設定文字是否橫向的拉伸變形。
font-size：設定文字字體大小。
src：設定自訂字體的相對路徑或絕對路徑，注意，此屬性只能在@font-face規則中使用。
相容瀏覽器
說到瀏覽器對@font-face的相容問題，這裡涉及到一個字體format的問題，因為不同的瀏覽器對字體格式支援是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支援什麼樣的字體，前面也簡單帶到了有關字體的幾種格式，下面我就分別說一下這個問題，讓大家心裡有個概念：
一、TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網站優化,支援這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+ ,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援元資料包的分離,支援這種字型的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3. 6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，可以從TrueType建立此格式字體,支援此字體的瀏覽器有【IE4+】；
五、SVG(.svg)格式：
.svg字體是基於SVG字體渲染的一種格式,支援這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10. 0+,iOS Mobile Safari3.2+】。
注意：實現本節的瀏覽器特效是需要下載上面這幾種字體格式檔案的！ ！ ！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div>
<p><b>注意:</b> 需要引入外部字体文件显示效果。</p>
</body>
</html>