» » Tutorial Belajar CSS: Cara Memiringkan dan Menebalkan Huruf dengan CSS

Tutorial Belajar CSS: Cara Memiringkan dan Menebalkan Huruf dengan CSS

Edit

 Melanjutnya tutorial Font CSS, kali ini kita akan membahas Cara Memiringkan dan Menebalkan Huruf dengan CSS. Property yang akan kita gunakan adalah font-style dan font-weight.

Cara Memiringkan Huruf HTML dengan CSS

Efek huruf miring sering digunakan untuk menandai kalimat atau kata penting di dalam konten kita. Untuk mendapatkan efek huruf miring (italic) dengan CSS, kita bisa menggunakan property font-style. Property font-style memiliki 3 nilai, yakni: normal, italic, dan oblique.

Untuk memiringkan huruf, kode CSS nya adalah: font-style: italic atau font-style: oblique. Kedua perintah ini akan menghasilkan efek huruf miring. Perbedaannya, font-style: italic akan menggunakan format font terpisah yang bertipe italic (jika tersedia), sedangkan font-style: oblique hanya akan memiringkan font yang ada beberapa derajat (tanpa menggunakan font italic khusus).

Perbedaan italic dengan oblique umumnya tidak terdeteksi, namun jika font yang ada menyediakan versi italic, font-style: italic akan menghasilkan huruf miring yang lebih baik.

Jika anda ingin menghapus efek miring dari teks, gunakan perintah: font-style: normal.

Sebagai contoh, untuk memiringkan sebuah tag <span> dengan class miring, berikut adalah kode CSSnya:

span.miring {
   font-style: italic;
}

Cara Menebalkan Huruf HTML dengan CSS

Untuk membuat huruf atau font HTML menjadi tebal (bold), kita menggunakan properti font-weight. properti font-weight memiliki 13 nilai yang terdiri dari 4 keyword dan 9 angka.

Ke-13 nilai properti font-weight tersebut adalah: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 dan 900. Kesemua nilai ini dimaksudkan untuk membuat berbagai ukuran ketebalan teks. Dimulai dari angka 100 untuk teks yang paling tipis, sampai dengan nilai 900 untuk teks yang paling tebal. Namun agar keseluruh nilai ini memiliki efek yang berbeda, jenis font yang dipilih juga harus menyediakan pilihan-pilihan ini.

Untuk menghapus efek tebal dari teks, gunakan perintah: font-weight: normal.

Jika anda hanya ingin membuat huruf menjadi tebal tanpa mempedulikan tingkat ketebalannya, kode CSS yang dibutuhkan hanyalah font-weight: bold.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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>

Tutorial Belajar CSS - Contoh Cara Menebalkan dan Memiringkan HurufDalam contoh tutorial diatas, saya membuat class untuk masing-masing nilai. Anda dapat melihat efek yang dihasilkan dari penggunaan nilai properti yang berbeda.

Jika anda menjalankan kode diatas di dalam web browser Google Chrome, nilai font-weight: 600 akan ditampilkan seperti text normal (tanpa ditebalkan), namun jika anda menjalankannya menggunakan web browser Mozilla Firefox, font-weight: 600 akan ditampilkan dengan huruf tebal. Perbedaan ini menjadi catatan apabila anda menggunakan font-weight: 600 untuk membuat text menjadi tebal. Agar terhindar dari permasalahan ini, anda sebaiknya menggunakan font-weight: bold.

Subscribe to receive free email updates:

Related Posts :

0 Response to "Tutorial Belajar CSS: Cara Memiringkan dan Menebalkan Huruf dengan CSS"

Posting Komentar

Langganan: Posting Komentar (Atom)