語法:
@font-face :{屬性: 取值;}
取值:
- font-family:
- 設(shè)置文本的字體名稱。
- font-style:
- 設(shè)置文本樣式。
- font-variant:
- 設(shè)置文本是否大小寫。
- font-weight:
- 設(shè)置文本的粗細(xì)。
- font-stretch:
- 設(shè)置文本是否橫向的拉伸變形。
- font-size:
- 設(shè)置文本字體大小。
- src:
- 設(shè)置自定義字體的相對路徑或者絕對路徑,注意,此屬性只能在@font-face規(guī)則里使用。
說明:
@font-face 能夠加載服務(wù)器端的字體文件,讓客戶端顯示客戶端所沒有安裝的字體?!疚④浀腎E 5已經(jīng)是開始支持這個屬性,但是只支持微軟自有的.eot (Embedded Open Type) 格式,而其他瀏覽器直到現(xiàn)在都沒有支持這一字體格式。然而,從Safari 3.1開始,網(wǎng)頁重構(gòu)工程師已經(jīng)可以設(shè)置.ttf(TrueType)和.otf(OpenType)兩種字體做為自定義字體了?!?/p>
兼容性:
.eot格式
類型 |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
版本 | (√)IE6 | (×)Firefox 2.0 | (×)Chrome 1.0.x | (×)Opera 9.63 | (×)Safari 3.1 |
(√)IE7 | (×)Firefox 3.0 | (×)Chrome 2.0.x | (×)Safari 4 | ||
(√)IE8 | |||||
.ttf格式
類型 |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
版本 | (×)IE6 | (×)Firefox 2.0 | (×)Chrome 1.0.x | (×)Opera 9.63 | (√)Safari 3.2.1 |
(×)IE7 | (×)Firefox 3.0 | (×)Chrome 2.0.x | (√)Opera 10 | (√)Safari 4 | |
(×)IE8 | (√)Firefox 3.5 | ||||
EOT字體示例(本示例源自微軟Festival of Ornament):
