CSS3教程-字型

前端開發的程式員們，你們對使用CSS3教程-@font-face實現個人化字型瞭解多少呢？今天我們給大家介紹CSS3 @font-face ，有興趣的可以瞭解下。

在網頁中，我們可以用CSS的font-family屬性來定義字型，然而定義的字型在使用者的電腦上能否正確呈現則要看使用者的電腦是否安裝了該字型。我們經常能看到國外的一些個人網站使用了非常漂亮的字型，而這些字型通常在使用者的電腦中是沒有安裝的，所以用font-family屬性就無法實現了，今天我們就介紹使用@font-face實現個人化字型。

CSS3 @font-face 規則：

在 CSS3 之前，web 設計師必須使用已在使用者電腦上安裝好的字型。

通過 CSS3，web 設計師可以使用他們喜歡的任意字型。

當您您找到或購買到希望使用的字型時，可將該字型檔存放到 網頁伺服器上，它會在需要時被自動下載到使用者的電腦上。

您“自己的”的字型是在 CSS3 @font-face 規則中定義的。

@font-face支援如下屬性：

font-family：設定文本的字型名稱。

font-style：設定文本樣式。

font-variant：設定文本是否大小寫。

font-weight：設定文本的粗細。

font-stretch：設定文本是否橫向的展開變形。

font-size：設定文本字型大小。

src：設定自訂字型的相對路徑或者絕對路徑。

瀏覽器支援：

Firefox、Chrome、Safari 以及 Opera 支援 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字型。

Internet Explorer 9+ 支援新的 @font-face 規則，但是僅支援 .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.ttf’),url(‘Sansation_Light.eot’); /* IE9+ */}div{font-family:myFirstFont;}</style>

使用粗體字型：

您必須為粗體文本添加另一個包含描述符的 @font-face：

執行個體：

@font-face{font-family: myFirstFont;src: url(‘Sansation_Bold.ttf’),url(‘Sansation_Bold.eot’); /* IE9+ */font-weight:bold;}

檔案 “Sansation_Bold.ttf” 是另一個字型檔，它包含了 Sansation 字型的粗體字元。

只要 font-family 為 “myFirstFont” 的文本需要顯示為粗體，瀏覽器就會使用該字型。

通過這種方式，我們可以為相同的字型設定許多 @font-face 規則。

CSS3 字型描述符：

下面的表格列出了能夠在 @font-face 規則中定義的所有字型描述符：

描述符	值	描述
font-family	name	必需。規定字型的名稱。
src	URL	必需。定義字型檔的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可選。定義如何展開字型。預設是 “normal”。
font-style	ormal italic oblique	可選。定義字型的樣式。預設是 “normal”。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可選。定義字型的粗細。預設是 “normal”。
unicode-range	unicode-range	可選。定義字型支援的 UNICODE 字元範圍。預設是 “U+0-10FFFF”。

以上就是CSS3教程-字型的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

