Dalam tutorial kali ini kita akan membahas mengenai Jenis Font pada Web, Jenis Font yang digunakan pada text di halaman web, sangat mempengaruhi tampilan dari halaman web itu sendiri, faktor kerapihan yang menjadi nilai tambah ketika kita menggunaan Jenis Font yang pas untuk halaman web yang anda buat.
Jenis Font yang digunakan pada text di halaman web, bisa kita rubah dengan menggunakan property font-family yang telah disediakan oleh CSS.
Dalam pemilihan Font anda juga harus memperhatikan ketersediaannya font yang digunakan di komputer pengguna/pengunjung web anda, sebab ketika anda menggunakan property font-family, browser akan melakukan pengecekan apakah jenis font yang digunakan sudah terinstall di komputer pengunjung webnya ?? semisal nilai value dari property font-family adalah tahoma, berarti browser akan mencari apakah di komputer client web, telah terinstall font Tahoma.
Jika ternyata font tidak terinstall bagaimana ?? Web akan ditampilkan dengan menggunakan font default yang telah di set pada browser.
Jadi Sebenarnya ketika anda menginstall Sistem Operasi Windows atau sistem operasi lain, beberapa jenis Font akan terinstall di komputer anda secara otomatis, lalu ketika anda menginstall aplikasi text editor seperti microsoft Word, Libre Office juga akan menginstall beberapa font tambahan secara otomatis, ketika anda menginstall aplikasi design grafis seperti photoshop beberapa font juga akan secara otomatis di install, Sehingga beberapa font yang standart kemungkinan besar telah terinstall di komputer anda, untuk melihat daftar font yang otomatis terinstall di sistem operasi windows bisa lihat disini https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
Mengenal Property font-family
Seperti yang telah disinggung di bagian sebelumnya, property font-family digunakan untuk mengganti jenis font yang digunakan dalam halaman web, untuk contoh skripnya silahkan perhatikan kode dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font-Family</title>
<style type="text/css">
body{
font-family:Tahoma;
}
.pertama{
font-family:Verdana;
}
</style>
</head>
<body>
<h2>Sedang Belajar Font-Family</h2>
<p class="pertama">Paragraf Pertama</p>
</body>
</html>Beberapa Aturan untuk penulisan nama font di property font-family antara lain :
- Nama font yang ditulis harus diawali huruf besar, semisal untuk tahoma harus ditulis Tahoma, tetapi aturan ini tidak berlaku untuk font generic, font generic akan dibahas lebih lanjut bagian bawah.
- Jika nama font terdapat spasi maka harus ditulis dengan tanda petik contohnya “Times New Roman”
semisal skrip diatas kita simpan dengan nama font-family.html, lalu kita buka di browser :
maka text yang tampil adalah seperti gambar diatas, penjelasannya sebagai berikut :
- Text pertama ditampilkan dengan menggunakan font jenis Tahoma, karena mendapatkan effect CSS dari selector body, property font-family bersifat inheritance yang artinya sifatnya bisa diturunkan ke turunanannya (child) sehingga text pertama menggunakan jenis font Tahoma, konsep inheritance bisa dibaca di sifat penurunan di CSS
- Text kedua ditampilkan dengan menggunakan jenis font Verdana
Bagaimana Mudah bukan, anda cukup menuliskan nama font yang ingin digunakan.
Menuliskan Lebih dari 1 nama Font
Pada penjelasan diatas telah dibahas ketika anda menuliskan nama font tertentu, browser akan mencari apakah font tersebut telah terinstall di pc client pengguna website, nah masalahnya adalah ketika font yang diinginkan tidak terinstall di komputer.
Nah untuk mengatasi hal tersebut anda bisa menuliskan beberapa nama font secara bersamaan di 1 property font-family, contohnya adalah skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font-Family</title>
<style type="text/css">
.pertama{
font-family:Arial,"Times New Roman",Verdana;
}
</style>
</head>
<body>
<h2>Sedang Belajar Font-Family</h2>
<p class="pertama">Paragraf Pertama</p>
</body>
</html>pada kode css dengan value property font-family Arial,”Times New Roman”,Verdana, penulisan beberapa jenis font ini dapat mengatasi jika nama font yang ditulis tidak terinstall di komputer, sebagai pemisahnya bisa menggunakan tanda koma, maka urutan penggunaan font adalah sebagai berikut :
- Browser akan mencari jenis font Arial yang terinstall di Komputer pengunjung web jika ada maka text ditampilkan dengan jenis font Arial
- Jika Arial tidak ditemukan maka browser akan mencari jenis font “Times New Roman” yang terinstall di Komputer pengunjung web jika ada maka text ditampilkan dengan jenis font “Times New Roman”
- Jika “Times New Roman” tidak ditemukan maka browser akan mencari jenis font Verdana yang terinstall di Komputer pengunjung web jika ada maka text ditampilkan dengan jenis font Verdana
Mengenal Font Generic
Font Generic adalah jenis font yang berfungsi sebagai alternatif terakhir ketika font yang digunakan tidak tersedia di komputer client (pengguna web), CSS menyediakan 5 Jenis Font Generic, antara lain :
- Generic Font: serif
Jenis font ini adalah jenis font yang memiliki kaki atau garis tambahan pada ujung setiap huruf, jenis font ini lebih cocok digunakan pada media percetakan seperti buku,dan majalah, dengan menggunakan jenis font serif, text akan lebih mudah untuk dibaca. beberapa font yang termasuk dalam kategori serif antara lain Times New Roman, dan Georgia
- Generic Font: sans-serif
Sans disini berarti tanpa, jadi bisa diartikan jenis font ini tidak memiliki kaki atau garis tambahan pada ujung setiap hurufnya, jenis font ini sering digunakan untuk halaman web, karena dianggap lebih mudah dibaca, beberapa jenis fontnya antara lain : Arial, Verdana
- Generic Font: monospace
Font berjenis monospace adalah font yang memiliki lebar yang sama disetiap karakter, jika di font lain lebar untuk huruf ‘m’ dan ‘i’ akan berbeda, tetapi di jenis font ini akan dianggap sama, jenis font ini cocok digunakan untuk tulisan yang membutuhkan ketelitian seperti halnya programming, hal ini membuat banyak text editor yang menggunakan jenis font ini. jenis font yang termasuk dalam monospace antara lain Courier New, Courier, FreeMono.
- Generic Font:cursive
Font berjenis cursive adalah font yang memiliki bentuk seperti tulisan tangan, atau juga bisa seperti kaligrafi, jenis font ini cocok jika digunakan untuk judul atau sub judul, untuk jenis font cursive antara lain : “Comic Sans MS” dan “Apple Chancery”
- Generic Font:fantasy
Font berjenis fantasy adalah jenis font yang memiliki tampilan visual lebih menarik daripada serif, sans-serif, dan monospace, karena memiliki tampilan yang lebih menarik jenis font ini cocok digunakan untuk bagian judul text agar terlihat lebih menarik, untuk jenis font fantasy antara lain : Impact, Chalkduster, Jazz LET, Blippo
Untuk referensi dari tampilan Generic Font silahkan diakses di alamat : https://www.w3.org/Style/Examples/007/fonts.en.html
Kelima dari generic font tersebut bisa ditambahkan sebagai value property font-family, semisal untuk font utamanya adalah Verdana, anda dapat menambahkan salah satu font generic semisal serif, maka ketika komputer client tidak terdapat font Verdana, maka text akan ditampilkan dengan jenis generic font serif.
untuk hasil maksimal sebaiknya anda menggunakan generic fontnya di bagian terakhir, sebagai cadangan jika memang nama font yang ditulis tidak terinstall di komputer pengguna web.
Untuk lebih memahami silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Font-Family</title>
<style type="text/css">
#pertama{
font-family:Arial,"Times New Roman",Verdana,Tahoma,serif;
}
#kedua{
font-family:serif;
}
#ketiga{
font-family:sans-serif;
}
#keempat{
font-family:monospace;
}
#kelima{
font-family:cursive;
}
#keenam{
font-family:fantasy;
}
</style>
</head>
<body>
<h2>Sedang Belajar Font-Family</h2>
<p id="pertama">Paragraf Pertama</p>
<p id="kedua">Font Generic : serif</p>
<p id="ketiga">Font Generic : sans-serif</p>
<p id="keempat">Font Generic : monospace</p>
<p id="kelima">Font Generic : cursive</p>
<p id="keenam">Font Generic : fantasy</p>
</body>
</html>semisal kita simpan dengan nama font-generic.html, lalu kita buka di browser maka hasilnya :
maka hasilnya setiap text ditampilkan dengan menggunakan jenis font yang berbeda.
Baik itu dulu yang bisa kita bahas di tutorial kali ini, kita telah belajar mengenai cara merubah jenis font HTML dengan CSS, jika ada yang ingin di diskusikan silahkan di kolom komentar, sampai jumpa di tutorial css berikutnya.