Cara Mudah Memiringkan dan Menebalkan Huruf dengan CSS

font-style dan font-weight

Bagaimana cara Memiringkan dan Menebalkan Huruf dengan CSS?

tutorial-css-10

Untuk Memiringkan tulisan dalam css kita bisa memakai Property font-style, sedangkan untuk Menebalkan Huruf tulisan kita memakai Property font-weight.

Dalam tutorial ini kita akan membahas Property font-style dan font-weight beserta nilai-nilai didalam kedua Property ini.

Cara Memiringkan Tulisan dengan CSS

Memiringkan huruf atau tulisan dalam halaman merupkan salah satu cara untuk menandai text tertentu yang dirasa penting atau berbeda dari yang lainnya.

Jika dalam MS. office kita Memiringkan tulisan dengan ctrl+i namun dalam CSS, kita bisa menggunakan property font-style.

Font-style memiliki nilai normal, italic, dan oblique.

Jika font-style bernilai normal artinya tulisan akan tampil seperti biasa (default). Jika font-style bernilai italic atau oblique maka akan membuat tulisan miring.

Kedua nilai ini italic dan oblique memang untuk Memiringkan tulisan namun ada sedikit perbedaan antara keduanya

font-style: italic; akan membuat tulisan miring dengan dengan type font italic, sedangkan font-style: oblique; tidak.

Secara kasat mata perbedaannya tidak terlihat, hanya berbeda jika kita memakai jenis font italic.

Contoh cara penggunaan nya seperti dibawah ini:

p {
font-style: italic;
}
p {
font-style: oblique;
}

Cara Menebalkan Tulisan dengan CSS

Membuat tulisan tebal/bold dalam css kita bisa memakai properti font-weight.

Nilai dari property font-weight adalah: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 dan 900.

Fungsi dari semua nilai ini yaitu untuk membuat ketebalan dari pada tulisan.

Ketebalan tulisan sesuai dengan urutan angka pada nilai, 100 untuk tulisan yang paling tipis dan 900 tentu saja paling tebal.

Tapi dari ke 13 nilai dari font-weight ada satu nilai yang bukan untuk menebalkan tulisan yaitu nilai normal,

Nilai norma pada font-weight berfungsi untuk menghilang efek bold pada tulisan.

Contoh Properti font-style dan font-weight

Berikut adalah contoh membuat tulisan html miring dan tebal (bold) dengan CSS

<!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 memakai font-style: italic</p>
<p class="oblique">Teks memakai font-style: oblique</p>

<p class="bold">Teks memakai font-weight: bold</p>
<p class="bolder">Teks memakai font-weight: bolder</p>
<p class="lighter">Teks memakai font-weight: lighter</p>
<p class="bold100">Teks memakai font-weight: 100</p>
<p class="bold200">Teks memakai font-weight: 200</p>
<p class="bold300">Teks memakai font-weight: 300</p>
<p class="bold400">Teks memakai font-weight: 400</p>
<p class="bold500">Teks memakai font-weight: 500</p>
<p class="bold600">Teks memakai font-weight: 600</p>
<p class="bold700">Teks memakai font-weight: 700</p>
<p class="bold800">Teks memakai font-weight: 800</p>
<p class="bold900">Teks memakai font-weight: 900</p>
</body>
</html>

Dari contoh ini kita bisa melihat perbedaan antara 100 dengan 900. Dan lihat juga hasil dari font-style nilai italic dan oblique.
Begitulah cara membuat tulisan miring dan tulisan tebal dengan CSS.
Semoga bermanfaat

Keyword:

  • cara menebalkan memiringkan dan undeline tulisan dengan bahasa html

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas