Ciri font-size
Ciri font-size menetapkan saiz
fon teks. Nilai bagi ciri ini adalah
sebarang unit
untuk saiz (biasanya, ini ialah px, em
atau rem) atau kata kunci khas
(digunakan sangat jarang).
Sintaks
pemilih {
font-size: nilai;
}
Nilai dalam bentuk kata kunci
| Nilai | Keterangan |
|---|---|
xx-small |
Paling paling kecil. Contoh: Lorem ipsum dolor sit amet. |
x-small |
Paling kecil. Contoh: Lorem ipsum dolor sit amet. |
small |
Kecil. Contoh: Lorem ipsum dolor sit amet. |
medium |
Sederhana. Contoh: Lorem ipsum dolor sit amet. |
large |
Besar. Contoh: Lorem ipsum dolor sit amet. |
x-large |
Sangat besar. Contoh: Lorem ipsum dolor sit amet. |
xx-large |
Paling besar. Contoh: Lorem ipsum dolor sit amet. |
larger |
Lebih besar daripada fon elemen induk dengan nilai tertentu. |
smaller |
Lebih kecil daripada fon elemen induk dengan nilai tertentu. |
Nilai lalai: medium.
Contoh
Mari kita tetapkan saiz fon untuk perenggan kepada
20px:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Contoh
Dalam contoh ini, saiz untuk perenggan ditetapkan
kepada 16px, dan untuk span di dalamnya - 150%.
Dalam kes ini, saiz fon untuk span akan
menjadi 150% daripada induknya,
iaitu perenggan, dan saiz sebenarnya akan
menjadi :
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Contoh
Dalam contoh ini, saiz untuk perenggan ditetapkan
kepada 16px, dan untuk span di dalamnya - larger.
Dalam kes ini, saiz fon untuk span akan
lebih besar daripada induknya (perenggan):
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Contoh
Perhatikan bahawa fon dengan
font-family
yang berbeza dan font-size yang sama secara visual mungkin
berbeza saiznya (untuk menyelesaikan masalah ini
lihat ciri font-size-adjust).
Dalam contoh di bawah, kedua-dua perenggan mempunyai font-size
16px, tetapi font-family yang berbeza:
<p id="elem1">
Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
Lorem ipsum dolor sit amet.
</p>
#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
: