CSS3教學-字體

前端開發的程式設計師們，你們對使用CSS3教學-@font-face實現個人化字體了解多少呢？今天我們要來跟大家介紹CSS3 @font-face ，有興趣的可以了解下。

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

CSS3 @font-face 規則：

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

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

當您找到或購買到您希望使用的字體時，可將該字體檔案存放到 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 規則中定義的所有字體描述符：

ormalitalicobliquenormalbold100

描述符	值	描述
font-family	name	必需。規定字體的名稱。
src	URL	必需。定義字型檔案的 URL。
font-stretch	normal condensed ultra-condensed extra-condensedg extra-expanded ultra-expanded 可選。定義如何拉伸字體。預設是 “normal”。 font-style
	可選。定義字體的樣式。預設是 “normal”。 font-weight
	200 800 900	可選。定義字體的粗細。預設是 “normal”。
unicode-range	unicode-range	可選。定義字體支援的 UNICODE 字元範圍。預設是 “U+0-10FFFF”。

 以上就是CSS3教學-字體的內容，更多相關內容請關注PHP中文網（www.php.cn）！