CSS3 @font-face 規則


實例

指定名為"myFirstFont"的字體，並指定在哪里可以找到它的URL：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

流覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 規則.

但是, Internet Explorer 9 只支持 .eot 類型的字體, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 與.otf 兩種類型字體.

注意： Internet Explorer 8 及更早IE版本不支持@font-face 規則.

屬性定義及使用說明

@font-face規則，網頁設計師再也不必使用的"web-safe"的字體之一。

字體的名稱，font - face規則：

  • font-family: myFirstFont;

字體檔包含在您的伺服器上的某個地方，參考CSS：

  • src: url('Sansation_Light.ttf')

如果字體檔是在不同的位置，請使用完整的URL：

  • src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

現在準備使用該字體，下麵是如何使用它所有的div元素的一個例子：

div
{
font-family: myFirstFont;
}

語法：

    @font-face
    {
    font-properties
    }

以下實例為在div中使用的字體:

div
{
font-family: myFirstFont;
}

語法

@font-face
{
font-properties
}

字體描述 值 說明
font-family name 必需的。定義字體的名稱。
src URL 必需的。定義該字體下載的網址（S）
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded		 可選。定義該字體應該如何被拉長。默認值是"正常"
font-style normal
italic
oblique		 可選。定義該字體應該是怎樣樣式。默認值是"正常"
font-weight normal
bold
100
200
300
400
500
600
700
800
900		 可選。定義字體的粗細。默認值是"正常"
unicode-range unicode-range 可選。定義該字體支持Unicode字元的範圍。默認值是"ü+0-10 FFFF"

相關文章

CSS3 教學: CSS3 Fonts