CSS3 字體

CSS3 @font-face 規則

使用以前 CSS 的版本，網頁設計師不得不使用用戶電腦上已經安裝的字體。

使用 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) 字體.

注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。

使用您需要的字體

在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然後指向該字體檔。

	提示：URL請使用小寫字母的字體，大寫字母在IE中會產生意外的結果

如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：

實例

<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>

使用粗體文本

您必須添加另一個包含粗體文字的@font-face規則：

實例

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }

該檔"Sansation_Bold.ttf"是另一種字體檔，包含Sansation字體的粗體字。

流覽器使用這一文本的字體系列"myFirstFont"時應該呈現為粗體。

這樣你就可以有許多相同的字體@font-face的規則。

CSS3 字體描述

下表列出了所有的字體描述和裏面的@font-face規則定義：