font-weight digunakan untuk mengatur kadar ketebalan font. Umumnya adalah normal atau bold (tebal). Namun, Anda dapat mengaturnya lebih detail (berjenjang).Ada dua cara yang bisa Anda lakukan, dengan menuliskan nilai ketebalan dengan huruf yang telah dikenal css atau dengan angka kelipatan 100.
Nilai (value) yang dikenal css pada properti font-weight:
normal
Ketebalan font dalam batas normal, setara dengan 400.
bold
Font dalam keadaan ditebalkan, setara dengan 700.
lighter
Ketebalan font dikurangi dari ukuran ketabalan font di awal didekalarasikan.
bolder
Ketebalan font ditambah dari ukuran ketabalan font di awal didekalarasikan.
Contoh: font_weight.html
<!DOCTYPE HTML>
<html>
<head>
<title>Properti font-weight css</title>
<style type="text/css">
/*set nilai awal h1 normal*/
h1{font-weight: normal;}
/*jadikan h1 dalam level bold*/
h1.bold{font-weight: bold;}
/*jadikan h1 normal ke level lighter*/
h1.lighter{font-weight: lighter;}
/*jadikan h1 normal ke level bolder*/
h1.bolder{font-weight: bolder;}
</style>
</head>
<body>
<h1 class="normal">Ketebalan font dalam batas normal.</h1>
<h1 class="bold">Ketebalan font dalam level bold.</h1>
<h1 class="lighter">Ketebalan font dalam batas normal dikurangi ketebalannya.</h1>
<h1 class="bolder">Ketebalan font dalam batas normal ditambah kadar ketebalannya.</h1>
</body>
</form>
</html>
Tampilan:
 |
| Tampilan font-weight berdasarkan level. |
Dimulai dengan angka 100 dalam kategori ketebalan font tipis kemudian naik; 200, 300 sampai 900, level ketebalannya semakin naik. Jika disimpulkan, level 100 sampai 500 berada di level ketebalan normal, sedangkan 600-900 sudah berada di level bold. Untuk lebih jelasnya: levelangka.html
<!DOCTYPE HTML>
<html>
<head>
<title>Properti font-weight css level 100</title>
<style type="text/css">
p.lev100{font-weight: 100;}
p.lev200{font-weight: 200;}
p.lev300{font-weight: 300;}
p.lev400{font-weight: 400;}
p.lev500{font-weight: 500;}
p.lev600{font-weight: 600;}
p.lev700{font-weight: 700;}
p.lev800{font-weight: 800;}
p.lev900{font-weight: 900;}
</style>
</head>
<body>
<p class="lev100">Ketebalan font berada di lever 100</p>
<p class="lev200">Sekarang di level 200</p>
<p class="lev300">Level 300</p>
<p class="lev400">Naik menjadi 400</p>
<p class="lev500">Sudah 500</p>
<p class="lev600">Naik 100 lagi menjadi 600</p>
<p class="lev700">700 deh..</p>
<p class="lev800">Kasih 100 lagi menjadi 800</p>
<p class="lev900">Berada di level tertinggi, level 900</p>
</body>
</form>
</html>Tampilan:
 |
| Level 100. |
Referensi tulisan:
- font-weight Css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 27 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Tidak ada komentar:
Posting Komentar