Fon CSS

Sifat fon CSS mentakrifkan fon, tebal, saiz dan gaya teks.

Fon CSS

Dalam CSS, terdapat dua jenis nama keluarga fon:

Keluarga fon universal - sistem fon yang berkongsi rupa yang serupa Gabungan (seperti "Serif" atau "Monospace")

Keluarga fon khusus - Keluarga fon khusus (seperti "Times" atau "Courier")

Keluarga fon

Sifat keluarga fon menetapkan keluarga fon teks.

Atribut keluarga fon harus menetapkan beberapa nama fon sebagai mekanisme "sandaran", jika penyemak imbas tidak menyokong fon pertama, dia akan mencuba fon seterusnya.

Nota: Jika nama keluarga fon adalah lebih daripada satu aksara, ia mestilah dalam tanda petikan, seperti Keluarga Fon: "宋体".

Gaya fon

digunakan terutamanya untuk menentukan atribut gaya fon teks condong.

Atribut ini mempunyai tiga nilai:

Normal - memaparkan teks secara normal

Italik - memaparkan teks dalam huruf condong

Teks senget - memaparkan teks ke sisi Italic (sangat serupa dengan italik, tetapi kurang disokong)

Saiz Fon

Sifat saiz fon menetapkan saiz teks.

Keupayaan untuk mengurus saiz teks adalah sangat penting dalam reka bentuk web. Walau bagaimanapun, anda tidak boleh melaraskan saiz fon untuk menjadikan perenggan kelihatan seperti tajuk, atau tajuk untuk kelihatan seperti perenggan.

Pastikan anda menggunakan tag HTML yang betul, untuk <h1> - <h6> untuk tajuk dan <p> untuk perenggan:

Nilai saiz fon boleh mutlak atau saiz relatif.

Saiz mutlak:

Menetapkan teks kepada saiz yang ditentukan

Tidak membenarkan pengguna menukar saiz teks dalam semua penyemak imbas

Menentukan saiz fizikal daripada output Saiz mutlak berguna apabila

Saiz relatif:

Tetapkan saiz relatif kepada elemen sekeliling

Benarkan pengguna menukar saiz teks dalam penyemak imbas

Jika Anda tidak menentukan saiz fon, dan saiz lalai adalah sama seperti perenggan teks biasa, iaitu 16 piksel (16px=1em).

Tetapkan saiz fon dalam piksel

Tetapkan saiz teks dan piksel, memberikan anda kawalan penuh ke atas saiz teks:

Gunakan em Untuk menetapkan saiz fon

Untuk mengelakkan masalah tidak dapat mengubah saiz teks dalam Internet Explorer, banyak 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 menggunakan formula berikut: px/16=em Dalam penyelesaian, saiz fon lalai elemen <body>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
h1{font-family:"微软雅黑"}
p.text1{font-style:italic;}
p.text2{font-size:40px;}
p.text3{font-size:1.875em;} /* 30px/16=1.875em */
p.text4{font-size:0.875em;}
</style>
</head>
<body>
<h1>《七步诗》曹植</h1>
<p class="text1">煮豆持做羹,</p>
<p class="text2">漉豉以为汁,</p>
<p class="text3">萁在釜下燃,</p>
<p class="text4">豆在釜中泣,</p>
<p class="text5">本自同根生,</p>
<p class="text6">相煎何太急?</p>
</body>
</html>

Meneruskan pembelajaran

||

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{font-family:"微软雅黑"} p.text1{font-style:italic;} p.text2{font-size:40px;} p.text3{font-size:1.875em;} /* 30px/16=1.875em */ p.text4{font-size:0.875em;} </style> </head> <body> <h1>《七步诗》曹植</h1> <p class="text1">煮豆持做羹,</p> <p class="text2">漉豉以为汁,</p> <p class="text3">萁在釜下燃,</p> <p class="text4">豆在釜中泣,</p> <p class="text5">本自同根生,</p> <p class="text6">相煎何太急?</p> </body> </html>

serahkan Tetapkan Semula Kod
Operasi automatik