Melanjutnya panduan Font CSS, kali ini kita akan membahas Cara Memiringkan dan Menebalkan Huruf dengan CSS. Property yang akan kita gunakan ialah font-style dan font-weight.
Cara Memiringkan Huruf HTML dengan CSS
Efek huruf miring sering digunakan bagi menandai kalimat atau kata urgen di pada konten kita. Bagi memperoleh efek huruf miring (italic) dengan CSS, kita dapat menggunakan property font-style. Property font-style mempunyai 3 nilai, yakni: normal, italic, dan oblique.
Bagi memiringkan huruf, kode CSS nya ialah: font-style: italic atau font-style: oblique. Kedua petunjuk ini akan menghasilkan efek huruf miring. Perbedaannya, font-style: italic akan menggunakan format font terpisah yang bertipe italic (kalau terdapat), sedangkan font-style: oblique hanya akan memiringkan font yang terdapat beberapa derajat (tanpa menggunakan font italic khusus).
Perbedaan italic dengan oblique umumnya tak terdeteksi, namun kalau font yang terdapat menyediakan versi italic, font-style: italic akan menghasilkan huruf miring yang lebih bagus.
Bila sahabat ingin menghapus efek miring dari teks, gunakan petunjuk: font-style: normal.
Selaku contoh, bagi memiringkan sebuah tag <span> dengan class miring, berikut ialah kode CSSnya:
|
1 |
span.miring {<br/> font-style: italic;<br/>} |
Cara Menebalkan Huruf HTML dengan CSS
Bagi merancang huruf atau font HTML menjadi tebal (bold), kita menggunakan properti font-weight. properti font-weight mempunyai 13 nilai yang terdiri dari 4 keyword dan 9 angka.
Ke-13 nilai properti font-weight tersebut ialah: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 dan 900. Kesemua nilai ini dimaksudkan bagi merancang bermacam-macam ukuran ketebalan teks. Dimulai dari angka 100 bagi teks yang sangat tipis, hingga dengan nilai 900 bagi teks yang sangat tebal. Namun agar keseluruh nilai ini mempunyai efek yang berbeda, jenis font yang dipilih pun mesti menyediakan pilihan-pilihan ini.
Bagi menghapus efek tebal dari teks, gunakan petunjuk: font-weight: normal.
Panduan font-style dan font-weight
Selaku contoh panduan bagi memiringkan dan menebalkan huruf, berikut ialah kode HTML dan CSS bagi properti font-style dan font-weight:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><title>Belajar font-style dan font-weight</title><br/><style type=text/css><br/> .italic { font-style: italic; }<br/> .oblique { font-style: oblique; }<br/> <br/> .bold { font-weight: bold; }<br/> .bolder { font-weight: bolder; }<br/> .lighter { font-weight: lighter; }<br/> .bold100 { font-weight: 100; }<br/> .bold200 { font-weight: 200; }<br/> .bold300 { font-weight: 300; }<br/> .bold400 { font-weight: 400; }<br/> .bold500 { font-weight: 500; }<br/> .bold600 { font-weight: 600; }<br/> .bold700 { font-weight: 700; }<br/> .bold800 { font-weight: 800; }<br/> .bold900 { font-weight: 900; }<br/></style><br/></head><br/><body><br/> <h2>Belajar CSS: font-style dan font-weight</h2><br/> <br/> <p class=italic>Teks dengan font-style: italic</p><br/> <p class=oblique>Teks dengan font-style: oblique</p><br/> <br/> <p class=bold>Teks dengan font-weight: bold</p><br/> <p class=bolder>Teks dengan font-weight: bolder</p><br/> <p class=lighter>Teks dengan font-weight: lighter</p><br/> <p class=bold100>Teks dengan font-weight: 100</p><br/> <p class=bold200>Teks dengan font-weight: 200</p><br/> <p class=bold300>Teks dengan font-weight: 300</p><br/> <p class=bold400>Teks dengan font-weight: 400</p><br/> <p class=bold500>Teks dengan font-weight: 500</p><br/> <p class=bold600>Teks dengan font-weight: 600</p><br/> <p class=bold700>Teks dengan font-weight: 700</p><br/> <p class=bold800>Teks dengan font-weight: 800</p><br/> <p class=bold900>Teks dengan font-weight: 900</p><br/></body><br/></html> |
Pada contoh panduan diatas, saya merancang class bagi masing-masing nilai. Sahabat dapat melihat efek yang didapatkan dari pemakaian nilai properti yang berbeda.
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
