CSS3 字體

CSS3 @font-face 規(guī)則

在CSS3之前，web設(shè)計師必須使用已在用戶計算機上安裝好的字體，不能夠使用離線字體，不過通過CSS3，web設(shè)計師可以使用他們喜歡的任意字體。

當(dāng)您找到或購買到希望使用的字體時，可將該字體文件存放到web服務(wù)器上，它會在需要時被自動下載到用戶的計算機上。

您"自己的"的字體是在 CSS3 @font-face 規(guī)則中定義的。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

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 規(guī)則。

使用您需要的字體

在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

	提示：URL請使用小寫字母的字體，大寫字母在IE中會產(chǎn)生意外的結(jié)果

如果需要為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)，通過下面的實例您可以嘗試操作一下：

實例

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

div
{
   font-family:myFirstFont;
}
</style>

嘗試一下 ?

使用粗體文本

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

實例

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

嘗試一下 ?

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

瀏覽器使用這一文本的字體系列"myFirstFont"時應(yīng)該呈現(xiàn)為粗體。

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

CSS3 字體描述

下表列出了所有的字體描述和里面的@font-face規(guī)則定義：