以前 CSS3 的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。 使用 CSS3，網頁設計師可以使用他/她喜歡的任何字體。 當你發現您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給需要的用戶。 您所選擇的字體在新的 CSS3 版本有關于`@font-face`規則描述。 您"自己的"的字體是在 CSS3 `@font-face` 規則中定義的。 **注意：**Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體。 Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型）。 Chrome, Safari 和 Opera 也支持 SVG 字體/折疊。 Internet Explorer 同樣支持 EOT (Embedded OpenType) 字體。 在 `@font-face` 規則中，您必須首先定義字體的名稱（比如 FontAwesome ），然后指向該字體文件 fontawesome-webfont.woff 。 ~~~ @font-face { font-family: 'FontAwesome'; src: url('fonts/fontawesome-webfont.woff'); } .font6 { font-family: 'FontAwesome', sans-serif; font-size: 14px; color: pink; line-height: 1.3em; } ~~~ ## 源碼 本文中所用例子源碼參見[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial) 中 `samples` 目錄下的 font.html