Design Code 設計密碼

CSS3 @font-face 規則

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

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

當您找到或購買到希望使用的字體時，可將該字體文件存放到web 服務器上，它會在需要時被自動下載到用戶的電腦上。

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

瀏覽器支持

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'); <span class="code_comment">/* IE9+ */</span>
}
div
{
font-family:myFirstFont;
}
</style>
	

使用粗體字體

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

實例

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); <span class="code_comment">/* IE9+ */</span>
font-weight:bold;
}
	

文件"Sansation_Bold.ttf" 是另一個字體文件，它包含了Sansation 字體的粗體字符。

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

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

CSS3 字體描述符

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