masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Fon CSS3

Fon CSS3

Dalam halaman web, kita boleh menggunakan sifat keluarga fon CSS untuk mentakrifkan fon Walau bagaimanapun, ia bergantung pada sama ada fon yang ditakrifkan boleh dipaparkan dengan betul komputer pengguna sama ada fon dipasang pada komputer pengguna. Kami sering melihat bahawa beberapa laman web peribadi asing menggunakan fon yang sangat cantik, tetapi fon ini biasanya tidak dipasang pada komputer pengguna, jadi ia tidak boleh dicapai menggunakan atribut font-family Hari ini kami akan memperkenalkan penggunaan @font- face implements yang diperibadikan fon.

Adalah tidak tepat untuk mengatakan bahawa @font-face ialah ciri baharu CSS3, kerana CSS2 sudah pun menyokong ciri ini dan Internet Explorer telah menyokongnya seawal versi 5, tetapi kaedah pelaksanaan IE Ia adalah melalui format fon eot (Jenis Terbuka Terbenam) sendiri, yang tidak disokong oleh penyemak imbas lain. @font-face menyokong atribut berikut:

Font-family: Tetapkan nama fon teks.

Gaya fon: Tetapkan gaya teks.

Varian fon: Tetapkan sama ada teks adalah huruf besar atau huruf kecil.

Berat fon: Tetapkan ketebalan teks.

Regangan fon: Tetapkan sama ada teks diregangkan secara mendatar.

Saiz fon: Tetapkan saiz fon teks.

src: Tetapkan laluan relatif atau laluan mutlak fon tersuai.

Gunakan fon yang anda perlukan

Dalam peraturan @font-face baharu anda mesti terlebih dahulu mentakrifkan nama fon (katakan myFirstFont) dan kemudian tuding pada fon tersebut fail .



Petua: Sila gunakan fon huruf kecil untuk URL, huruf besar akan menghasilkan hasil yang tidak dijangka dalam IE


Untuk menggunakan fon bagi elemen HTML, sila rujuk nama fon (myFirstFont) melalui atribut font-family: 

<!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>

Jika anda mahukan halaman yang berwarna-warni, anda memerlukan lebih banyak Untuk fon gaya, orang telah menghasilkan banyak alternatif fon Selain daripada penyelesaian @font-face, terdapat juga sIFR, Cufon, Typeface.js, dan lain-lain, serta .webfont secara ringkasnya, .webfont mempunyai kebenaran akses jadual yang dibenamkan dalam fon , penyemak imbas boleh membaca maklumat pelesenan ini dan memutuskan sama ada fon ini perlu dimuat turun dan diberikan. Di samping itu, Typekit juga merupakan penyelesaian yang patut diberi perhatian, yang meletakkan fon pada pelayan pihak ketiga untuk membuat panggilan. Kelebihan dan kekurangan penyelesaian ini akan diperkenalkan secara terperinci kemudian.

Meneruskan pembelajaran
||
<html> <head> <meta charset="utf-8"> </head> <style> .font-face-display { font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif; } </style> <body> <div class="font-face-display">Take me to your heart</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)  492837 permainan