CSS3 @font-face 規(guī)則

實例


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

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

嘗試一下 ?

屬性定義及使用說明

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

字體的名稱，font - face規(guī)則：

  • font-family: myFirstFont;

字體文件包含在您的服務器上的某個地方，參考CSS：

  • src: url('Sansation_Light.ttf')

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

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

現(xiàn)在準備使用該字體，下面是如何使用它所有的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"

瀏覽器支持

瀏覽器          

Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 規(guī)則。

但是，Internet Explorer 9 只支持 .eot 類型的字體，F(xiàn)irefox, Chrome, Safari, 和 Opera 支持 .ttf 與.otf 兩種類型字體。

注意：Internet Explorer 8 及更早IE版本不支持@font-face 規(guī)則。