在網頁中，我們可以用CSS的font-family屬性來定義字型，然而定義的字型在使用者的電腦上能否正确呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人網站使用了非常漂亮的字型，而這些字型通常在使用者的電腦中是沒有安裝的，是以用font-family屬性就無法實作了，今天我們就介紹使用@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浏覽器相容性如下：
4+
3.5+
3.1+
10+
先聲明一個名為ChantelliAntiquaRegular的字型，有一種老的寫法是這樣的：
其它的HTML和CSS代碼如下：
最重效果如下：
想要豐富多彩的頁面就需要有更多的字型樣式，人們想出了很多字型替代方案，除了@font-face方案外還有sIFR、Cufon、Typeface.js等，還有.webfont，簡單說，.webfont 就是在字型中嵌入了通路許可表，浏覽器可以讀出這些許可資訊，并決定是否應該下載下傳和渲染這些字型。另外還有Typekit也是一種值得關注的方案，将字型放在第三方伺服器上供調用。這些方案的優缺點，将會在以後做詳細的介紹。
相關文章：
<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å！25個優秀的國外單頁網站設計作品欣賞</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>
<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>
歡迎任何形式的轉載，但請務必注明出處。