-->

Iklan bawah header

Belajar CSS : Menebalkan dan Memiringkan Huruf di CSS

Menebalkan dan memiringkan huruf

melanjutkan tutorial sebelumnya, kali ini kita akan membahas mengenai cara menebalkan dan memiringkan huruf dengan CSS.

Cara Menebalkan Huruf dengan CSS

Untuk menebalkan huruf atau font html dengan css, kita akan menggunakan property font-weight. Property font-weight memiliki beberapa nilai yang bisa digunakan, antara lain normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Semua value tersebut digunakan untuk mengatur ketebalan dari teks yang akan dibuat. Mulai dari angka 100 untuk membuat teks yang paling tipis, sampai angka 900 untuk membuat teks yang paling tebal. Agar semua nilai dari property font-weight memiliki efek yang berbeda, maka jenis font yang dipilih harus menyediakan pilihan-pilihan tersebut.

Agar bisa mengetahui perbedaan dari setiap nilai pada property font-weight, silahkan perhatikan contoh berikut 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>

Simpan script diatas, lalu jalankan di browser.

Menebalkan huruf dengan css

Dari gambar diatas, bisa dilihat bahwa setiap paragraf memiliki ketebalan yang berbeda-beda.

Cara Memiringkan Huruf dengan CSS

Memiringkan huruf seringkali dilakukan untuk menandai kalimat atau kata yang penting. Untuk memiringkan huruf dengan css, kita bisa menggunakan property font-style, property ini memiliki 3 value, yaitu normal, italic dan oblique.

Untuk memiringkan huruf, kita bisa menggunakan font-style: italic dan font-style: oblique. Perbedaan dari italic dan oblique umumnya tidak terdeteksi, namun jika font yang digunakan menyediakan fitur style italic, maka font-style: italic akan menghasilkan huruf miring yang lebih baik

Untuk lebih jelasnya bisa kalian lihat pada contoh berikut 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>

Simpan kode tersebut, lalu coba jalankan di browser.

Memiringkan huruf dengan css

Dari gambar diatas, kita bisa melihat perbedaan antara value italic dan oblique.

Demikian pembahasan singkat mengenai cara menebalkan dan memiringkan huruf dengan css. Semoga Bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel