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），然後指向該字型檔案。

如需為 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規則定義：