font-weight

Properti CSS font-weight mengatur berat atau ketebalan font dan bergantung pada wajah font yang tersedia dalam font family atau weight yang ditentukan oleh browser.

span {
font-weight: bold;
}

Properti font-weight menerima nilai kata kunci atau nilai numerik yang telah ditentukan. Kata kunci yang tersedia adalah:

• normal
• bold
• bolder
• lighter

Nilai numerik yang tersedia adalah:

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

Nilai kata kunci font normal yaitu nilai numerik 400 dan nilai tebal menjadi 700.

Untuk melihat efek menggunakan nilai selain 400 atau 700, font yang digunakan harus memiliki wajah bawaan yang cocok dengan bobot yang ditentukan.

Jika font memiliki versi tebal (“700”) atau normal (“400”) sebagai bagian dari font family, browser akan menggunakannya.

Jika itu tidak tersedia, browser akan meniru huruf tebal atau versi normal dari font.

<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>

<p class="w100">This is 100 weight</p>

<p class="w200">This is 200 weight</p>

<p class="w300">This is 300 weight (available)</p>

<p class="w400">This is 400 weight (available)</p>

<p class="w500">This is 500 weight</p>

<p class="w600">This is 600 weight (available)</p>

<p class="w700">This is 700 weight (available)</p>

<p class="w800">This is 800 weight (available)</p>

<p class="w900">This is 900 weight</p>

body {
padding: 0 20px;
font-family: 'Open Sans';
}

.w100 {
font-weight: 100;
}

.w200 {
font-weight: 200;
}

.w300 {
font-weight: 300;
}

.w400 {
font-weight: 400;
}

.w500 {
font-weight: 500;
}

.w600 {
font-weight: 600;
}

.w700 {
font-weight: 700;
}

.w800 {
font-weight: 800;
}

.w900 {
font-weight: 900;
}

Demo diatas menggunakan font Open Sans, disematkan menggunakan Google Web Fonts API.

Font dimuat dengan semua bobot font yang tersedia dan menggunakan properti font-weight, bobot yang berbeda ditampilkan seperti yang dijelaskan oleh teks setiap paragraf.

Bobot yang tidak tersedia hanya menampilkan bobot terdekat yang logis.

CSS Syntax

font-weight: normal | bold | bolder | lighter | number | initial | inherit;

JavaScript Syntax

object.style.fontWeight="bold"

Attribute Value