Properti font-size

Properti font-size mengatur ukuran font teks. Nilai propertinya adalah satuan ukuran apa pun (biasanya px, em atau rem) atau kata kunci khusus (sangat jarang digunakan).

Sintaks

cssselector {
  font-size: nilai;
}

Nilai dalam Bentuk Kata Kunci

Nilai default: medium.

Contoh

Mari kita atur ukuran font untuk paragraf menjadi 20px:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

Contoh

Dalam contoh ini, ukuran untuk paragraf ditetapkan 16px, dan untuk span di dalamnya - 150%. Dalam hal ini, ukuran font untuk span akan 150% dari induknya, yaitu paragraf, dan ukuran sebenarnya adalah 16px * 150% = 24px:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Contoh

Dalam contoh ini, ukuran untuk paragraf ditetapkan 16px, dan untuk span di dalamnya - larger. Dalam hal ini, ukuran font untuk span akan lebih besar dari induknya (paragraf):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Contoh

Perhatikan bahwa font dengan font-family yang berbeda dan font-size yang sama secara visual bisa memiliki ukuran yang sangat berbeda (untuk menyelesaikan masalah ini lihat properti font-size-adjust).

Dalam contoh di bawah, kedua paragraf memiliki font-size 16px, tetapi font-family yang berbeda:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: