CSS3 字體

CSS3 @font-face 規則

以前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) 字體.

注意： 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規則定義：