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.
bahagian seterusnya