Tutorial memiringkan dan menebalkan huruf dalam CSS
03/08/2018 Admin CSS

Tutorial font-style dan font-weight
Sebagai contoh tutorial untuk memiringkan dan menebalkan huruf, berikut adalah kode HTML dan CSS untuk properti font-style dan font-weight:
 
<!DOCTYPE html>
<html>
<head>
<title>Belajar font-style dan font-weight</title>
<style type="text/css">
   .italic { font-style: italic; }
   .oblique { font-style: oblique; }
   
   .bold { font-weight: bold; }
   .bolder { font-weight: bolder; }
   .lighter { font-weight: lighter; }
   .bold100 { font-weight: 100; }
   .bold200 { font-weight: 200; }
   .bold300 { font-weight: 300; }
   .bold400 { font-weight: 400; }
   .bold500 { font-weight: 500; }
   .bold600 { font-weight: 600; }
   .bold700 { font-weight: 700; }
   .bold800 { font-weight: 800; }
   .bold900 { font-weight: 900; }
</style>
</head>
<body>
   <h2>Belajar CSS: font-style dan font-weight</h2>
   
   <p class="italic">Teks dengan font-style: italic</p>
   <p class="oblique">Teks dengan font-style: oblique</p>
   
   <p class="bold">Teks dengan font-weight: bold</p>
   <p class="bolder">Teks dengan font-weight: bolder</p>
   <p class="lighter">Teks dengan font-weight: lighter</p>
   <p class="bold100">Teks dengan font-weight: 100</p>
   <p class="bold200">Teks dengan font-weight: 200</p>
   <p class="bold300">Teks dengan font-weight: 300</p>
   <p class="bold400">Teks dengan font-weight: 400</p>
   <p class="bold500">Teks dengan font-weight: 500</p>
   <p class="bold600">Teks dengan font-weight: 600</p>
   <p class="bold700">Teks dengan font-weight: 700</p>
   <p class="bold800">Teks dengan font-weight: 800</p>
   <p class="bold900">Teks dengan font-weight: 900</p>
</body>
</html>
 
Dalam contoh tutorial diatas, saya membuat class untuk masing-masing nilai. Anda dapat melihat efek yang dihasilkan dari penggunaan nilai properti yang berbeda.
 

Share to
Brand & Clients