Mengenal Jenis-jenis Font Standar CSS
Font Standar atau bisa juga di sebut Font Generik adalah jenis font yang sudah tersedia di hampir semua sistem operasi. Font generic berdasarkan bentuknya di bagi menjadi 5 jenis yaitu font serif, font sans-serif, font monospace, font cursive dan font fantasy.
Family font Serif
Font serif adalah jenis font yang memiliki kaki di setiap ujung hurufnya. Font yang masuk dalam katagori font sarif seperti Times New Roman dan Georgia. Font jenis sarif biasanya digunakan pada media cetak kertas karena akan lebih mudah untuk dibaca.
Contoh font generic sarif
ZenvHtml
Family font Sans-serif
Font sans-serif adalah font yang tidak memiliki kaki setiap ujung karakternya. Contoh font jenis sans-serif seperti font Arial, font Verdana, font Trebuchet MS, font Helvetica dan font Calibri. Font jenis sans-serif umumnya di gunakan pada perangkat digital seperti web dan aplikasi.
Contoh font generic Sans-serif
ZenvHtml
Family Font Monospace
Font monospace adalah font tampil lebar pada setiap karakternya dan identik sama panjangnya. Misalnya Huruf i kecil sama panjangnya dengan huruf w. Contoh dari font family ini seperti Font Courier, Font Courier New dan Font Andale Mono. Font seperti ini biasanya di gunakan untuk penulisan code program.
Contoh font generic Monospace
ZenvHtml
Family Font Cursive
Font cursive adalah font yang khas dengan tulisan tangan atau kaligrafi. Font family jenis Cursive seperti Comic Sans.
Contoh font grneric Cursive
ZenvHtml
Family Font Fantasy
Font fantasy adalah font yang bersifat visual dengan karakter khusus. Font jenis ini antara lain font disney, matrix dan lain-lain.
Contoh font generic Fantasy
ZenvHtml
Contoh font-family sebagai berikut:
Memilih jenis font dengan CSS
Dengan CSS kita dapat menentukan sendiri jenis font yang akan kita gunakan di halaman web atau dokument HTML.
Property yang dapat kita gunakan untuk mentukan jenis font dengan CSS yakni property Font-family.
Property Font-family valuenya (nilainya) bisa di isi lebih dari satu jenis font.
Contoh Property font-family di CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-family:Tahoma,Arial,sans-serif;
}
#p2 {
font-family:"Comic Sun",cursive;
}
</style>
</head>
<body>
<p id="p1" >Contoh penggunaan property font-family di CSS</p>
<p id="p2" >Contoh penggunaan property font-family di CSS</p>
</body>
</html>
Preview
Contoh penggunaan property font-family di CSS
Contoh penggunaan property font-family di CSS
Perhatikan font-family:Tahoma,Arial,sans-serif;, kita memberi tiga nilai sekaligus. Artinya, ketika web di muat oleh aplikasi browser, yang pertama kali akan di cari adalah jenis font Tahoma, jika font Tahoma tidak di temukan, maka sistem akan mencari font jenis Arial, jika masih tidak di temukan dalam komputer user, maka sistem akan menggunakan font generic sans-serif sebagai opsi terakhir.
Selanjutnya perhatikan font-family:"Comic Sun",cursive; kita memiliki dua jenis Font. font pertama "Comic Sun" jenis font di kurung dengan tanda petik dua (") artinya, ketika nama font terdapat sepasi, maka nama font harus di letakkan di antara dua tanda petik.
Menentukan gaya font dengan CSS
Selain kita bisa memilih jenis font di CSS, kita juga bisa menentukan gaya font dengan property Font-style.
Contoh property font-style di CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-style:normal;
}
#p2 {
font-style:italic;
}
#p3 {
font-style:oblique;
}
</style>
</head>
<body>
<p id="p1" >Contoh penggunaan property font-family di CSS</p>
<p id="p2" >Contoh penggunaan property font-family di CSS</p>
<p id="p3" >Contoh penggunaan property font-family di CSS</p>
</body>
</html>
Preview
Contoh penggunaan property font-family di CSS
Contoh penggunaan property font-family di CSS
Contoh penggunaan property font-family di CSS
Menentukan ukuran font dengan CSS
Menentukan ukuran font untuk web itu sangat penting, pasalnya font yang terlalu kecil akan mengakibatkan pusing saat teks di web kita di baca oleh user. Untuk menentukan ukuran font di CSS, kita dapat menggunakan property Font-size. property ini valuenya dengan satuan ukuran px, em, pt dan lain-lain.
Contoh property Font-size di CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-size:10px;
}
#p2 {
font-size:20px;
}
#p3 {
font-size:30px;
}
</style>
</head>
<body>
<p id="p1" >Contoh penggunaan property font-size di CSS</p>
<p id="p2" >Contoh penggunaan property font-size di CSS</p>
<p id="p3" >Contoh penggunaan property font-size di CSS</p>
</body>
</html>
Preview
Contoh penggunaan property font-size di CSS
Contoh penggunaan property font-size di CSS
Contoh penggunaan property font-size di CSS
Mengatur ketebalan huruf dengan CSS
Selain menentukan ukuran font denaga property Font-size, kita juga dapat menentukan ketebalan font untuk mempermudah user saat membaca teks di halaman wab kita. Untuk menebtukan ketebalan font dengan CSS, kita dapat menggunakan property font-weight. Property ini memiliki 4 nilai standar yakni normal, lighter, bold dan bolder.
Contoh property Font-weight di CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-weight:normal;
}
#p2 {
font-weight:lighter;
}
#p3 {
font-weight:bolder;
}
#p4 {
font-weight:bold;
}
</style>
</head>
<body>
<p id="p1" >Contoh penggunaan property font-weight di CSS</p>
<p id="p2" >Contoh penggunaan property font-weight di CSS</p>
<p id="p3" >Contoh penggunaan property font-weight di CSS</p>
<p id="p3" >Contoh penggunaan property font-weight di CSS</p>
</body>
</html>
</div>
Preview
Contoh penggunaan property font-weight di CSS
Contoh penggunaan property font-weight di CSS
Contoh penggunaan property font-weight di CSS
Contoh penggunaan property font-weight di CSS
variant font di CSS
Propery font-variant di gunakan untuk menentukan apakah font akan di tampilkan dengan huruf kapital atau tidak. Property ini memiliki 2 value yakni normal dan small-caps.
Contoh property Font-variant di CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-variant:normal;
}
#p2 {
font-variant:small-caps;
}
</style>
</head>
<body>
<p id="p1" >Contoh penggunaan property font-weight di CSS</p>
<p id="p2" >Contoh penggunaan property font-weight di CSS</p>
</body>
</html>
Preview
Contoh penggunaan property font-weight di CSS
Contoh penggunaan property font-weight di CSS
Property font-variant: small-caps; akan membuat font tampil kapital namun ukuran mengecil.
Masih banyak property untuk mendesain font yang akan kita bahas di update artikel selanjutnya.
Ikuti kami di media sosial untuk menerima pemberitahuan update artikel yang terbaru.
TERIMAKASIH...!