CSS memiliki banyak sekali properti yang dapat digunakan untuk memperindah tampilan halaman web, salah satu contohnya adalah properti yang mengatur fonts. Untuk itu pada kesempatan kali ini akan dibahas bagaimana cara membuat style font seperti italic, bold dan small-caps pada CSS dan contoh sintaknya.
Section Artikel
Font Style
Properti font-style pada CSS lebih sering digunakan untuk membuat teks italic (miring).
Properti font-style memiliki beberapa value, yaitu:
- normal – Teks ditampilkan secara normal
- italic – Teks ditampilkan dengan huruf miring
- oblique – Teks ditampilkan “condong” (Oblique sangat mirip dengan italic, tetapi jarang digunakan)
Contoh :
<!DOCTYPE html> <html> <head> <style> p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } </style> </head> <body> <p class="normal">Paragraf ini ditampilkan dengan normal style.</p> <p class="italic">Paragraf ini ditampilkan dengan italic style.</p> <p class="oblique">Paragraf ini ditampilkan dengan oblique style.</p> </body> </html>
Font Weight
Properti font-weight pada CSS biasanya digunakan untuk menentukan tebal font, salah satu contohnya adalah membuat teks Bold.
Berikut adalah contoh penggunaan properti font-weight pada CSS.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Ini adalah paragraf.</p>
<p class="light">Ini adalah paragraf.</p>
<p class="thick">Ini adalah paragraf.</p>
<p class="thicker">Ini adalah paragraf.</p>
</body>
</html>
Font Variant
Properti font-variant pada CSS digunakan untuk menentukan apakah teks harus ditampilkan dalam huruf kecil (small-caps).
Dalam penggunaan font small-caps, hasil yang ditampilkan akan membuat semua huruf kecil diubah menjadi huruf kapital. Namun, huruf kapital hasil konversi ditampilkan dalam ukuran font yang lebih kecil daripada huruf capital asli pada teks.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Namaku Hege Refsnes.</p>
<p class="small">Namaku Hege Refsnes.</p>
</body>
</html>
Sekian pembahasan dan contoh cara penggunaan properti font-family dalam CSS, semoga bermanfaat.
