Halo Sob! setelah kalian mempelajari bagaimana Perbedaan Antara Inline, External, dan Internal di CSS ,dalam postingan sebelumnya. Artikel yang admin buat kali ini akan menjelaskan bagaimana Cara Menggunakan Font Styling Di CSS. Oke langsung saja kita ke pembahasannya Cekidot!
Font Style atau Font Styling mempunyai arti yaitu gaya tulisan atau penataan tulisan. Menurut w3schools font CSS merupakan sebuah properti yang menentukan gaya font untuk sebuah teks. biasanya properti yang digunakan yaitu untuk mengatur jenis, ukuran, ketebalan, dan kemiringan suatu tulisan. Font sangat berguna sekali, misalnya dalam sebuah website/blog yang memiliki tampilan yang indah tetapi ukuran tulisan yang digunakan terlalu kecil atau terlalu berdekatan, itu akan menyulitkan pembaca. Untuk itu kita harus bisa menyesuaikan font yang digunakan agar sesuai untuk di baca dan dengan ukuran yang sesuai pula. Supaya pembaca nyaman membaca di website/blog kalian. Berikut jenis-jenis font standar yang sering digunakan di CSS.
DAFTAR ISI
Jenis Font Standar CSS
1. Font Serif
Font serif adalah font yang memiliki kaki pada setiap ujung hurufnya, font ini akan membuat lebih mudah terbaca pada media cetak. Biasanya font ini digunakan pada media cetak misalnya kertas karena akan terkesan rapi dan mudah dibaca. Contoh font serif yaitu: Times New Roman, Georgia, Lucida Bright, dan Lucida Fax.
2. Font Sans-serif
Font sans-serif merupakan font kebalikan dari serif, font sans-serif adalah font yang tidak memiliki kaki pada setiap ujung hurufnya. Font jenis ini akan mudah dibaca dalam media elektronik seperti web, misalnya seperti website. Contoh font sans-serif yaitu: Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri.
3. Font Monospace
Font monospace merupakan font yang lebar setiap karakternya sama panajang. Contohnya pada font monospace akan mengambil sama panjang antara huruf “i” dengan huruf “W“. Jika dibandingkan dengan font reguler huruf “W” akan mengambil tempat yang lebih panjang jika dibandingkan huruf “i“. Biasanya font ini digunakan untuk urusan yang bersifat teknis, misalnya seperti menulis kode program. Contoh font monospace yaitu: Andale Mono, Courier, dan Courier New.
4. Font Cursive
Font cursive adalah font yang meniru tulisan kaligrafi atau tulisan tangan. Font jenis ini biasanya digunakan untuk aspek tulisan yang tidak terlalu formal. Contoh font cursive yaitu: Comic Sans, dan Snell.
5. Font Fantasy
Font fantasy adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dan lain-lain. Font jenis ini biasanya jarang digunakan pada tulisan utama, namun biasanya digunakan pada bagian tulisan yang butuh perhatian khusus, misalnya pada tittle. Contoh font fantasy yaitu: Impact, Luminari, Trattatello, Marker Felt, dan Chalkduster.
Sytax CSS Untuk Merubah Font
- font-size: digunakan untuk mengatur ukuran font.
- font-weight: digunakan untuk mengatur ketebalan font.
- font-family: digunakan untuk mengubah jenis font.
- font-style: digunakan untuk memberikan gaya pada font.
- font-color: digunakan untuk merubah warna font.
- caption: digunakan untuk merubah caption (seperti tombol, drop-down, dll.)
- icon: digunakan untuk merubah font label ikon
- menu: digunakan untuk merubah font menu dropdown
- message-box: digunakan untuk merubah font kotak dialog
- small-caption: digunakan untuk caption tetapi versi lebih kecilnya
- status-bar: digunakan untuk font status bar
- initial: digunakan untuk mengatur properti ke nilai standarnya. Baca tentang
- inherit: digunakan untuk mewarisi properti dari elemen induknya
Contoh Penggunaan Font Di CSS
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Font Di CSS</title>
<style type="text/css"> .size{ font-size: 15px; } .weight{ font-weight: bold; } .family{ font-family: sans-serif; } .style{ font-style: italic; } </style>
</head>
<body>
<p class="size">Contoh Font Size</p>
<p class="weight">Contoh Font Weight</p>
<p class="family">Contoh Font Family</p>
<p class="style">Contoh Font Style</p>
<p style="color: blue;">Contoh Font Color</p>
<p style="font:caption">Contoh Font Caption</p>
<p style="font:icon">Contoh Font Icon</p>
<p style="font:menu">Contoh Font Menu</p>
<p style="font:message-box">Contoh Font Message Box</p>
<p style="font:small-caption">Contoh Font Small Caption</p>
<p style="font:status-bar">Contoh Font Status Bar</p>
<p style="font:initial;">Contoh Font Initial</p>
<p style="font:inherit;">Contoh Font Inherit</p>
</body>
</html>
Hasilnya:
Cara Mengatur Sebuah Font Di CSS
Penggunaan Font di CSS yaitu merubah jenis font menggunakan CSS. Kalian bisa menggunakan property font-family dan kalian isi dengan value nama font yang diinginkan. Value nama font bisa berisi lebih dari satu, misalnya font-family: “Times New Roman”, Times, serif;. Untuk Times New Roman dan Times merupakan nama font, dan serif merupakan jenis generik font. Dari ketiga value diatas maka web browser akan mencari font Times New Roman terlebih dahulu pada komputer, jika font Times New Roman tidak tersedia web browser akan mencari font Times pada komputer, dan jika font Times tidak ada maka web browser akan mencari jenis font generik serif yang hampir setiap komputer memiliki font tersebut, dan juga ada 3 aturan dalam penulisan nama font atau value pada property font-family di CSS diantaranya:
- Untuk memisahkan antara nama font satu dengan nama font lainnya diberi tanda koma.
- Untuk penulisan nama font harus diawali dengan huruf besar, misalnya Times, Georhia. Tetapu aturan ini tidak berlaku saat menulis nama generik font, misalnya sans, sans-serif.
- Jika nama font memiliki spasi maka penulisannya harus diapit dengan tanda kutip, misalnya “Times New Roman”.
<html>
<head>
<title>Cara Mengatur Sebuah Font Di CSS</title>
<style> .font1{font-family: "Times New Roman", Times, serif;} .font2{font-family: Arial, Helvetica, sans-serif;} </style>
</head>
<body>
<h1 class="font1">Contoh Font 1</h1>
<h1 class="font2">Contoh Font 2</h1>
</body>
</html>
Hasilnya:
Pada Contoh kode diatas terdapat dua buah heading yang memiliki nama class yang berbeda yaitu font1 dan font2. Nama class itulah yang digunakan untuk selector pada CSS. Pada selector class CSS bernama font1 yang memiliki property dan value font-family: “Times New Roman”, Times, serif; berarti akan merubah font atau tulisan yang ada di heading menjadi Times New Roman, apabila pada komputer tidak memiliki font tersebut maka akan menggunakan font selanjutnya yaitu Times, apabila font Times juga tidak ada maka akan menggunakan jenis font generik serif yang hampir setiap komputer memiliki jenis font tersebut. Sedangkan untuk selector class font2 penjelasannya sama dengan selector class font1. Jadi web browser akan selalu mencari nama font dari paling awal terlebih dahulu.
Kesimpulan
Jadi dalam penggunaan font styling di CSS itu terdapat jenis-jenis font standar seperti: Font Serif, Font Sans-serif, Font Monospace, Font Cursive, dan Font Fantasy. CSS juga memberikan syntax untuk merubah sebuah font agar lebih mudah seperti font-size, font-weight, font-family, font-style, font-color, dan lain sebaginya. Dan juga dalam penggunaan font styling di CSS terdapat aturan-aturan yang harus dipatuhi, agar font dapat bekerja dengan baik.
Sekian artikel Cara Menggunakan Font Styling Di CSS. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke teman-teman kalian. Terimakasih…