Fon CSS3
Fon CSS3
Peraturan CSS3 @font-face
Dalam versi CSS3 terdahulu, pereka web terpaksa menggunakan fon yang telah dipasang pada komputer pengguna.
Dengan CSS3, pereka web boleh menggunakan mana-mana fon yang dia suka.
Apabila anda menemui fail fon yang ingin anda gunakan, cuma masukkan fail fon pada tapak web anda dan ia akan dimuat turun secara automatik kepada pengguna yang memerlukannya.
Fon yang anda pilih diterangkan dalam versi CSS3 baharu dengan peraturan @font-face.
Fon "sendiri" anda ditakrifkan dalam peraturan CSS3 @font-face.
Gunakan fon yang anda perlukan
dalam @font- baharu peraturan muka, anda mesti terlebih dahulu menentukan nama fon (seperti myFirstFont) dan kemudian tuding pada fail fon.
Petua: Sila gunakan fon huruf kecil untuk URL huruf besar akan menghasilkan hasil yang tidak dijangka dalam IE
Jika anda perlu menggunakan fon untuk elemen HTML, sila hantar keluarga fon. atribut untuk merujuk nama fon (myFirstFont):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf') ,url('Sansation_Light.eot'); /* IE9 */ } div { font-family:myFirstFont; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字體.</p> <div> 使用CSS3,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體 </div> </body> </html>
Gunakan teks tebal
Anda mesti menambah satu lagi peraturan @font-face yang mengandungi teks tebal:
rreeeThe fail "Sansation_Bold.ttf" ialah fail fon lain yang mengandungi teks tebal fon Sansation.
Pelayar yang menggunakan keluarga fon "myFirstFont" untuk teks ini harus menjadikannya tebal.
Dengan cara ini anda boleh mempunyai banyak peraturan @font-face untuk fon yang sama.
Penerangan fon CSS3
Jadual berikut menyenaraikan semua penerangan fon dan takrifan peraturan @font-face di dalam:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。規(guī)定字體的名稱。 |
src | URL | 必需。定義字體文件的 URL。 |
font-stretch |
| 可選。定義如何拉伸字體。默認是 "normal"。 |
font-style |
| 可選。定義字體的樣式。默認是 "normal"。 |
font-weight |
| 可選。定義字體的粗細。默認是 "normal"。 |
unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認是 "U+0-10FFFF"。 |