Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya
» » Mengenal dan Belajar CSS Fonts

Mengenal dan Belajar CSS Fonts

Oleh
Mengenal dan Belajar CSS Fonts - Masih pada topik belajar CSS, Pada kesempatan kali ini sinahu coding akan membahas tentang serba-serbi CSS font. Yaitu semua fungsi CSS yang berkaitan dengan font. Ada tiga hal dalam pembahasan ini; font-family, font-style, dan font-size. Masing-masing akan kita pelajari penjelasannya di bawah ini.

Macam-macam Properti pada CSS Fonts


1. Font Family


Properti font-family digunakan untuk menentukan jenis teks yang akan ditampilkan. Sebelumnya perlu diketahui bahwa ada dua tipe font family, yaitu generic family dan font family.

Generic family adalah grup atau kelompok dari jenis-jenis font yang memiliki kesamaan (seperti "Serif" atau "Monospace"). Sedangkan font family adalah jenis font secara spesifik (seperti "Times New Roman" atau "Arial").

Pada properti font-family sebaiknya mencakup beberapa nama font sebagai "fallback" sistem. Artinya, jika browser tidak support font pertama, maka akan mencoba font berikutnya.

Mulailah dengan font yang kamu inginkan, kemudian diakhiri dengan sebuah generic family. Fungsinya agar browser nanti secara otomatis memilih font yang sama dalam generic family ketika tidak ada font lain yang tersedia.

Sebagai catatan: Jika nama font-family lebih dari satu kata, maka harus ditulis dalam tanda kutip, seperti: "Times New Roman". dan jika lebih dari satu font-family maka dalam daftar penulisannya dipisahkan dengan koma.

Contoh penerapan dari penjelasan tersebut adalah seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
    font-family: "Times New Roman", Times, serif;
}

p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>Contoh CSS font-family</h1>
<p class="serif">Ini adalah paragraf. Menggunakan jenis font Times New Roman.</p>
<p class="sansserif">Ini adalah paragraf. Menggunakan jenis font Arial.</p>

</body>
</html>

maka hasilnya :

belajar CSS Fonts

2. Font Style


Properti font-style dalam CSS kebanyakan digunakan untuk membuat tulisan miring. Pada font-style ini ada 3 value yang bisa dipakai; normal, italic, dan oblique. Italic dan oblique keduanya sangat mirip, hanya saja oblique sedikit sekali support. Sedangkan normal berfungsi untuk menampilkan teks apa adanya, tanpa style.

Contoh penerapannya seperti ini :


<!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">Ini paragraf dengan font-style normal.</p>
<p class="italic">Ini paragraf dengan font-style italic.</p>
<p class="oblique">Ini paragraf dengan font-style oblique.</p>

</body>
</html>

Hasilnya :

belajar CSS Fonts

3. Font Size


Seperti namanya, font-size berfungsi untuk mengatur besar ukuran font. Besarnya size bisa didefinisikan dengan pixel, em (1 em=16px), atau percent. Bisa juga dengan mengkombinasikan ketiganya. Untuk lebih jelasnya perhatikan contoh berikut ini :


<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 14px;
}
</style>
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<p>Saya adalah paragraf. Besar ukuran tulisan paragraf ini dengan ukuran pixel, yaitu 14px. Kamu bisa merubahnya dengan ukuran percent, em, atau ukuran pixel lain.</p>

</body>
</html>

Maka hasilnya :

belajar CSS Fonts

Itulah pembahasan pada topik belajar CSS kali ini mengenai CSS fonts. Semoga bermanfaat buat konco sinahu semua, terutama yang sedang belajar CSS.


0 Komentar untuk "Mengenal dan Belajar CSS Fonts"

Back To Top