CSS3 字體

CSS3 字體

CSS3 @font-face 規(guī)則

以前CSS3的版本，網(wǎng)頁(yè)設(shè)計(jì)師不得不使用用戶計(jì)算機(jī)上已經(jīng)安裝的字體。

使用CSS3，網(wǎng)頁(yè)設(shè)計(jì)師可以使用他/她喜歡的任何字體。

當(dāng)你發(fā)現(xiàn)您要使用的字體文件時(shí)，只需簡(jiǎn)單的將字體文件包含在網(wǎng)站中，它會(huì)自動(dòng)下載給需要的用戶。

您所選擇的字體在新的CSS3版本有關(guān)于@font-face規(guī)則描述。

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

瀏覽器支持

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請(qǐng)使用小寫字母的字體，大寫字母在IE中會(huì)產(chǎn)生意外的結(jié)果

如需為 HTML 元素使用字體，請(qǐng)通過(guò) font-family 屬性來(lái)引用字體的名稱 (myFirstFont)：

實(shí)例

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

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

嘗試一下 ?

使用粗體文本

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

實(shí)例

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

嘗試一下 ?

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

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

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

CSS3 字體描述

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