Tutorial Belajar CSS Part 16 – Menebalkan dan memiringkan huruf dengan CSS

bySetyo Wibowo ID - 0

Dalam tutorial kali ini kita masih membahas mengenai hal yang berhubungan dengan huruf atau font, kita akan mempelajari mengenai bagaimana cara menebalkan dan memiringkan huruf dengan CSS.





Cara Menebalkan Huruf dengan CSS





CSS memberikan property yang digunakan untuk menebalkan huruf, property tersebut adalah font-weight, property font-weight memiliki beberapa value yang bisa anda gunakan antara lain :





  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900




Value tersebut digunakan untuk mengatur ukuran ketebalan dari text yang anda buat.





Diantara value tersebut terdapat angka 100 hingga 900, cara pengurutannya adalah angka 100 ketebalannya paling tipis hingga 900 dengan ketebalan paling tebal.





Penggunaan dari value diatas hasilnya akan tergantung dari font yang digunakan, font yang digunakan harus memiliki fitur untuk diatur ketebalannya.





Dari beberapa value yang disediakan oleh property font-weight, yang sering digunakan adalah font-weight:bold; value ini dipilih jika anda cuma ingin menebalkan tulisannya saja, tanpa mengatur berapa ketebalan dari huruf tersebut.





Agar teman – teman mengetahui perbedaan dari setiap nilai yang dituliskan pada property font-weight, silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<title>Belajar Google Font</title>
<style type="text/css">
   body
   {
       font-family: 'Arial';
   }
   .normal { font-weight: normal; }
   .bold { font-weight: bold; }
   .bolder { font-weight: bolder; }
   .lighter { font-weight: lighter; }
   .bold-100 { font-weight: 100; }
   .bold-200 { font-weight: 200; }
   .bold-300 { font-weight: 300; }
   .bold-400 { font-weight: 400; }
   .bold-500 { font-weight: 500; }
   .bold-600 { font-weight: 600; }
   .bold-700 { font-weight: 700; }
   .bold-800 { font-weight: 800; }
   .bold-900 { font-weight: 900; }
</style>
</head>
<body>
<p class="normal">ini adalah paragraf - Normal</p>
<p class="bold">ini adalah paragraf - Bold</p>
<p class="bolder">ini adalah paragraf - Bolder</p>
<p class="lighter">ini adalah paragraf - Lighter</p>
<p class="bold-100">ini adalah paragraf - Bold 100</p>
<p class="bold-200">ini adalah paragraf - Bold 200</p>
<p class="bold-300">ini adalah paragraf - Bold 300</p>
<p class="bold-400">ini adalah paragraf - Bold 400</p>
<p class="bold-500">ini adalah paragraf - Bold 500</p>
<p class="bold-600">ini adalah paragraf - Bold 600</p>
<p class="bold-700">ini adalah paragraf - Bold 700</p>
<p class="bold-800">ini adalah paragraf - Bold 800</p>
<p class="bold-900">ini adalah paragraf - Bold 900</p>
</body>
</html>




semisal kita simpan dengan nama font-weight.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :









maka hasilnya adalah seperti gambar diatas, terlihat perbedaan dari setiap paragraf, kita telah menset setiap paragraf memiliki class yang berbeda serta value property font-weight yang berbeda pula.





Cara Memiringkan Huruf dengan CSS





Selain bisa menebalkan huruf, CSS juga bisa digunakan untuk memiringkan huruf, Property yang digunakan adalah font-style, property ini memiliki 3 value antara lain :





  • normal : value ini digunakan jika anda tidak ingin memiringkan huruf
  • italic : value yang digunakan untuk memiringkan huruf
  • oblique : value yang digunakan untuk memiringkan huruf




jika dilihat dari fungsinya value italic dan oblique memiliki fungsi yang sama yaitu memiringkan text, lalu apa perbedaanya ?





value italic akan memberikan kemiringan pada text jika jenis font yang digunakan memiliki fitur style italic (bisa dimiringkan) , tetapi value oblique akan memiringkan jenis font, meskipun jenis font yang digunakan tidak memiliki fitur style italic.





Lalu pertanyaannya mana yang lebih baik untuk digunakan ?





jika jenis font yang digunakan memiliki fitur style italic (miring) akan lebih baik hasilnya jika menggunakan value italic daripada oblique.





Agar anda lebih mengetahui perbedaan dari 3 value ini, silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
<title>Belajar Google Font</title>
<style type="text/css">
	.normal{font-style:normal;}
	.italic{font-style:italic;}
	.oblique{font-style:oblique;}
</style>
</head>
<body>
<p class="normal">ini adalah paragraf - Normal</p>
<p class="italic">ini adalah paragraf - Italic</p>
<p class="oblique">ini adalah paragraf - Oblique</p>
</body>
</html>








semisal kita simpan dengan nama font-style.html, lalu kita buka di browser :









maka hasilnya seperti gambar diatas, terlihat perbedaan dari value italic dan oblique, value italic hasilnya bisa ditampilkan dengan tampilan lebih miring, daripada oblique.





Baik itu dulu yang warung belajar bisa bahas mengenai cara menebalkan dan memiringkan huruf dengan CSS, jika ada yang ingin didiskusikan silahkan di kolom Komentar, sekian dulu sampai jumpa di tutorial CSS selanjutnya.


Tags:

Post a Comment (0)

أحدث أقدم