CSS3 @font-face 規則
實例
指定名為"myFirstFont"的字體，並指定在哪裡可以找到它的URL：
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
嘗試一下»
瀏覽器支持
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('../../www.w3cschool.css/css3/Sansation_Light.ttf')
現在準備使用該字體，下面是如何使用它所有的div元素的一個例子：
div
{
font-family: myFirstFont;
}
{
font-family: myFirstFont;
}
語法：
- @font-face
{
font-properties
}
以下實例為在div中使用的字體:
div
{
font-family: myFirstFont;
}
{
font-family: myFirstFont;
}
語法
@font-face
{
font-properties
}
{
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字符的範圍。 默認值是"u+0-10 FFFF" |
相關文章
CSS3教程: CSS3 Fonts