Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 41 : Cara Menggunakan Property Font Family di CSS. Pada tutorial kali ini, kita akan belajar cara menggunakan property font weight untuk mengatur ketebalan dan bobot dari huruf.
Properti ini digunakan untuk mengatur ketebalan dan bobot font. Ini digunakan untuk menentukan bobot teks. Berat yang tersedia tergantung pada font-family yang digunakan oleh browser.
Sintaksis
Nilai properti
- Normal : Ini adalah font-weight default yang nilai numeriknya adalah 400.
- Lighter : Mengatur bobot font yang ada dari keluarga font dan membuat bobot font lebih ringan dibandingkan dengan elemen induk.
- Bolder : Mengatur font-weight yang ada dari font-family dan membuat font-weight lebih berat dibandingkan dengan elemen induk.
- Bold : Seperti namanya, ini digunakan untuk menentukan berat font tebal, dan nilai numeriknya adalah 700.
- Number: Digunakan untuk mengatur font-weight berdasarkan nomor yang ditentukan. Kisarannya bisa antara 1 hingga 1000.
- Initial : Digunakan untuk mengatur font-weight ke nilai defaultnya.
Mari kita lihat contoh properti ini.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Property font-weight</title>
<style>
body{
font-family: sans-serif;
}
p.satu{
font-weight: normal;
}
p.dua{
font-weight: lighter;
}
p.tiga{
font-weight: bolder;
}
p.empat{
font-weight: bold;
}
p.lima{
font-weight: 1000;
}
p.enam{
font-weight: initial;
}
p.tujuh{
font-weight: inherit;
}
p.delapan{
font-weight: unset;
}
</style>
</head>
<body>
<p class="satu">
Nilai property normal
</p>
<p class="dua">
Nilai property lighter
</p>
<p class="tiga">
Nilai property bolder
</p>
<p class="empat">
Nilai property bold
</p>
<p class="lima">
Nilai property number
</p>
<p class="enam">
Nilai property initial
</p>
<p class="tujuh">
Nilai property inherit
</p>
<p class="delapan">
Nilai property unset
</p>
</body>
</html>
Hasil dari kode di atas adalah :
Semoga tutorial ini bisa membantu Anda belajar cara menggunakan property font-weight di CSS untuk mengatur tebal dan bobot huruf.
0 Komentar