CSS3 字體
CSS3 @font-face 規則
以前 CSS3 的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。
使用 CSS3，網頁設計師可以使用他/她喜歡的任何字體。
當你發現您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給需要的用戶。
您所選擇的字體在新的 CSS3 版本有關於 @font-face 規則描述。
您"自己的"的字體是在 CSS3 @font-face 規則中定義的。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
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) 字體.
注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。
使用您需要的字體
在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然後指向該字體文件。
| 提示：URL請使用小寫字母的字體，大寫字母在IE中會產生意外的結果 |
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
實例
嘗試一下 »
使用粗體文本
您必須添加另一個包含粗體文字的@font-face規則：
該文件"Sansation_Bold.ttf"是另一種字體文件，包含Sansation字體的粗體字。
瀏覽器使用這一文本的字體系列"myFirstFont"時應該呈現為粗體。
這樣你就可以有許多相同的字體@font-face的規則。
CSS3 字體描述
下表列出了所有的字體描述和里面的@font-face規則定義：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。規定字體的名稱。 |
| src | URL | 必需。定義字體文件的 URL。 |
| font-stretch |
|
可選。定義如何拉伸字體。默認是 "normal"。 |
| font-style |
|
可選。定義字體的樣式。默認是 "normal"。 |
| font-weight |
|
可選。定義字體的粗細。默認是 "normal"。 |
| unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符範圍。默認是 "U+0-10FFFF"。 |