Tutorial Belajar CSS: Cara Memiringkan dan Menebalkan Huruf dengan CSS

Posted on

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:


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.

Bila sahabat hanya ingin merancang huruf menjadi tebal tanpa mempedulikan tingkat ketebalannya, kode CSS yang dibutuhkan hanyalah font-weight: bold.


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:

 Pada contoh panduan diatas, saya merancang class bagi masing-masing nilai. Sahabat dapat melihat efek yang didapatkan dari pemakaian nilai properti yang berbeda.

Bila sahabat menjalankan kode diatas di pada web browser Google Chrome, nilai font-weight: 600 akan ditampilkan seperti text normal (tanpa ditebalkan), namun kalau sahabat menjalankannya menggunakan web browser Mozilla Firefox, font-weight: 600 akan ditampilkan dengan huruf tebal. Perbedaan ini menjadi catatan apabila sahabat menggunakan font-weight: 600 bagi merancang text menjadi tebal. Agar terhindar dari permasalahan ini, sahabat sebaiknya menggunakan font-weight: bold.


eBook CSS Uncover Duniailkom

Bila sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/