Gaya fon CSS (Gaya Fon) ialah salah satu atribut gaya yang sangat diperlukan dalam halaman web Dengan gaya fon, halaman web kami boleh menjadi lebih cantik, jadi atribut gaya fon telah menjadi satu kemestian untuk setiap pengetahuan pereka.
Tetapkan atribut nama fon (font-family)
Pilih fon yang hendak digunakan dalam halaman tetapan atribut ini ialah: Simsun , Arial, Verdana, Helvetica, sans-serif, dsb., kaedah definisi:
.ziti {font-family: Simsun, Arial, Verdana;}
Tiga takrifan berturut-turut di sini Jika tiada fon pertama dalam fon pengguna, fon kedua akan digunakan, dan seterusnya Jika tiada fon ditetapkan dalam CSS, nilai lalai dalam penyemak imbas akan digunakan.
Tetapkan atribut saiz fon (saiz fon)
saiz fon boleh menetapkan saiz fon pada halaman Terdapat tiga unit yang biasa digunakan: em, px dan pt.
Pengenalan ringkas kepada tiga unit panjang ini:
px, unit panjang relatif. Piksel.
em, unit panjang relatif. Saiz fon berbanding dengan teks dalam objek semasa.
pt, unit panjang mutlak. titik.
Yang paling biasa digunakan ialah px. Kaedah tetapan fon adalah seperti berikut:
.ziti {font-size:12px;}
Tetapkan atribut gaya fon (gaya fon)
Gaya fon ialah atribut yang menetapkan sama ada fon condong atau tidak Terdapat tiga nilai secara keseluruhan:
normal, condong , serong dan normal ialah nilai lalai, condong dan serong dipaparkan dalam huruf condong. Contoh:
.ziti {font-style:italic;}
Tetapkan atribut ketebalan fon (ketebalan) (berat-fon)
Ketebalan (ketebalan) fon hanya mempunyai dua atribut , kerana ia Hanya terdapat dua jenis: bold dan non-bold Nilainya adalah normal dan bold, dan normal ialah nilai lalai. Contoh:
.ziti {font-weight:bold;}
Tetapkan atribut pembolehubah fon (varian fon)
varian fon hanya untuk huruf Inggeris dan tidak mempunyai kesan pada aksara Cina. Ia mentakrifkan fon yang akan dipaparkan dalam huruf besar kecil boleh difahami sebagai huruf besar kecil Walaupun ia adalah huruf besar, saiz teksnya adalah sama dengan huruf kecil, yang lebih kecil daripada huruf besar yang dimasukkan secara langsung. surat.
Fon-varian mempunyai dua nilai, biasa dan huruf kecil. normal ialah nilai lalai, iaitu fon biasa. huruf kecil menukar huruf kecil kepada huruf besar. Contoh:
.ziti {font-variant:small-caps;}
Kaedah penulisan komprehensif atribut fon (font)
fon ialah kaedah pintasan yang boleh mentakrifkan secara menyeluruh lima atribut di atas dalam atribut fon. Ia boleh menggunakan satu baris untuk mentakrifkan atribut fon. Susunan penulisan ialah: font font -style font-variant font-weight font-size font-family. Contoh:
.ziti {font:italic normal bold 18px arial;}
Jika atribut mempunyai nilai lalai, anda boleh meninggalkannya dan sistem akan menghuraikannya secara automatik sebagai nilai lalai.
Warna fon (warna)
Warna fon tergolong dalam kandungan dalam atribut teks CSS, ia tidak seperti fon Untuk atribut, anda perlu menambah fon sebelum warna, dan hanya warna boleh ditakrifkan.
.ziti {font:italic normal bold 18px arial;color:red;}
Gunakan ems untuk menetapkan saiz fon
Untuk mengelakkan masalah tidak dapat mengubah saiz teks dalam Internet Explorer, ramai pembangun menggunakan unit em dan bukannya piksel.
unit saiznya disyorkan oleh W3C.
1em adalah sama dengan saiz fon semasa. Saiz teks lalai dalam pelayar ialah 16px.
Oleh itu, saiz lalai 1em ialah 16px. Anda boleh menukar piksel kepada em melalui formula berikut: px/16=em
Contoh
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Cubalah
Dalam contoh di atas, saiz teks em adalah sama dengan piksel dalam contoh sebelumnya. Walau bagaimanapun, jika anda menggunakan unit em, teks boleh diubah saiz dalam semua penyemak imbas.
Malangnya, ia masih menjadi masalah IE. Apabila anda mengubah saiz teks, ia akan kelihatan lebih besar atau lebih kecil daripada biasa.
Anda juga boleh menggunakan peratusan untuk melaraskan saiz fon: badan {font-size:100%;}
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
</head>
<style type="text/css">
p#pmin
{
font:1em Arial;
}
p#pall
{
font:italic small-caps bold 12px/1.2em Arial;
}
p#p2
{
font:italic 18px/1.5em "宋体",Arial,sans-serif;
}
</style>
</head>
<body>
<p id="pmin">font值最小的形式,定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性).</p>
<p id="pall">定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).</p>
<p id="p2">字体属性演示</p>
</body>
</html>
bahagian seterusnya