masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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中文网(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,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>

Gunakan teks tebal

Anda mesti menambah satu lagi peraturan @font-face yang mengandungi teks tebal:

rreee

The 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-familyname必需。规定字体的名称。
srcURL必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • normal
  • italic
  • oblique
可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可选。定义字体的粗细。默认是 "normal"。
unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。




Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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,网站终于可以使用字体以外的预先选择“合法”字体 </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492411 permainan