CSS3 @font-face 規則
在 CSS3 之前，web 設計師必須使用已在用戶計算機上安裝好的字體。
通過 CSS3，web 設計師可以使用他們喜歡的任意字體。
當您您找到或購買到希望使用的字體時，可將該字體文件存放到 web 服務器上，它會在需要時被自動下載到用戶的計算機上。
您“自己的”的字體是在 CSS3 @font-face 規則中定義的。
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。
Internet Explorer 9+ 支持新的 @font-face 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。
注釋：Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。
使用您需要的字體
在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (hoverTreeFont).
先查看效果：http://hovertree.com/texiao/css/5.htm
完整HTML代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CSS3自定義字體 - 何問起</title><base target="_blank"/> <meta charset="utf-8" /> <style> @font-face { font-family: hoverTreeFont; src: url('http://hovertree.com/themes/fonts/Sansation_Light.ttf'),url('http://hovertree.com/themes/fonts/Sansation_Light.eot'); /* IE9+ */ } @font-face { font-family: hoverTreeFont; src: url('http://hovertree.com/themes/fonts/Sansation_Bold.ttf'),url('http://hovertree.com/themes/fonts/Sansation_Bold.eot'); /* IE9+ */ font-weight: bold; } .hvtbold { font-family: hoverTreeFont; } .hvtbold a{font-family: hoverTreeFont;}a{color:blue} div{font-size:16px;font-family:Arial, Sans-Serif,NSimSun,"\5b8b\4f53";border:1px solid green;margin:5px;} </style> </head> <body> <div class="hvtbold"> 加了自定義字體的效果：<br /><br /> With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts. <br /><br />何問起 hovertree.com <br /><br /><b>柯樂義http://keleyi.com</b><br /><br /><a href="http://hovertree.com/down/">ASP.NET CMS源代碼下載</a><br /> <br /><a href="http://hovertree.com/hvtart/bjae/is0xr36t.htm">原文</a> <a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/down/">更多特效</a> </div> <div>沒加自定義字體的效果：<br /><br /> With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts. <br /><br />何問起 hovertree.com <br /><br /><b>柯樂義http://keleyi.com</b><br /><br /><a href="http://hovertree.com/down/">ASP.NET CMS源代碼下載</a><br /> <br /><a href="http://hovertree.com/hvtart/bjae/is0xr36t.htm">原文</a> <a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/down/">更多特效</a> </div> </body> </html>