Properti CSS font-weight digunakan untuk mengatur seberapa tebal atau seberapa tipis suatu huruf akan ditampilkan halaman website. Value (nilai) Font-Weight menjadi nilai ketebalan absolut suatu font. Nilai paling rendah 100 merepresentasikan ketebalan font yang paling tipis (lightest) dan nilai 900 mewakili ketebalan font paling tebal (heaviest). Dibanding dengan Microsoft Word (hanya mengenal mode normal dan bold saja), maka pada properti CSS font-weight bisa diatur ketebalan huruf dengan variasi lebih banyak.
Sintaks penulisan CSS - arsip website design
Berikut ini sintaks penulisan CSS font-weight :
p {font-weight: bold}
Contoh penerapannya seperti ini :
/* Heading */
h1,h2,h3,h4{font-weight:900;font-family:'Open Sans', Tahoma, sans-serif;}
h1{font-size:26px;}
h2{font-size:16px;}
h3{font-size:20px;}
h4{font-size:16px;}
h1,h2,h3,h4{font-weight:900;font-family:'Open Sans', Tahoma, sans-serif;}
h1{font-size:26px;}
h2{font-size:16px;}
h3{font-size:20px;}
h4{font-size:16px;}
Nilai-nilai (value) yang dipakai untuk CSS font-weight :
Contoh :
Tampilan browser dibawah ini menunjukkan identifikasi derajat ketebalan sekaligus terwakili pada ketebalan teks yang bersangkutan :
Paragraf normal CSS-style ----> style="font-weight: normal"
Paragraf paling tipis CSS-style ----> style="font-weight: lighter"
Paragraf tebal CSS-style ----> style="font-weight: bold"
Paragraf paling tebal CSS-style ----> style="font-weight: 900"
Secara berututan 4 baris paragraf diatas dituliskan pada kode HTML-nya seperti ini :
<p style="font-weight: normal">Paragraf normal</p> “normal” bisa diganti dengan nilai “400”
<p style="font-weight: lighter">Paragraf paling tipis</p> “lighter” bisa diganti dengan nilai “100”
<p style="font-weight: bold">Paragraf tebal</p>
<p style="font-weight: 900">Paragraf lebih tebal</p>
Silahkan mencoba value lain. Kata “normal”, “bold” dan “lighter” bisa diganti dengan suatu nilai yang sesuai dengan keinginan.
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
