.png)
Kali ini, akan dibahas mengenai berbagai hal yang dapat dilakukan dalam mengubah font menggunakan CSS menggunakan font-family. Berikut pembahasannya.
Font dalam Web Browser
Font adalah jenis huruf yang digunakan dalam sebuah dokumen. Jika kalian membuka pengaturan font di Control Panel, disana terdapat ratusan font bawaan dari Windows yang bisa kalian pilih.
.png)
Daftar Font di Control Panel
Apabila kita membuat sebuah dokumen dengan font-font ini dan mencetaknya langsung, tidak akan menjadi masalah. Namun jika anda membuat dokumen yang akan digunakan di dalam komputer lain, sebaiknya menggunakan font standar yang kemungkinan besar akan tersedia di komputer tujuan untuk menghindari font yang tidak terbaca.
Dalam memilih jenis font untuk website, kondisi yang sama juga menjadi pertimbangan penting. Dalam CSS, kita bisa menggunakan berbagai jenis font sesuai dengan yang diinginkan. Namun font yang akan ditampilkan pada web browser sepenuhnya berasal dari perangkat pengguna itu sendiri. Jika kita memilih font yang tidak standar, maka desain web yang telah dirancang serapi mungkin akan menjadi ’kacau’ karena bisa saja font yang kita pilih tidak tersedia di perangkat pengguna. Untuk mengatasi hal ini, salah satunya adalah dengan menggunakan font ’standar’ yang umum tersedia di dalam berbagai sistem operasi seperti Windows, Linux, Mac OS, dll. untuk menjami desain font web yang telah dibuat dapat didukung oleh web browser pengguna.
Jenis-Jenis Font Standar CSS
Font Serif
Sumber : ifonts.xyz
Font serif merupakan font yang memiliki "kaki" pada setiap hurufnya. Contohnya adalah Times New Roman dan Vienna Modern. Font ini biasa dipakai untuk mencetak dokumen karena terkesan rapi dan mudah dibaca.
Font Sans-Serif
Sumber : medium.com
Font jenis ini merupakan kebalikan dari font serif yang tidak memiliki "kaki" pada setiap hurufnya. Contoh dari font jenis ini adalah Arial, Verdana, Helvetica, dan Calibri. Font jenis ini sering digunakan di media elektronik seperti web browser.
Font Monospace
.jpg)
Sumber : www.fontriver.com
Font ini adalah tipe font yang memiliki lebar sama untuk setiap hurufnya. Contoh dari font jenis ini adalah Courier, Courier New, dan Andale Mono. Biasanya font jenis ini digunakan untuk hal yang bersifat teknis, seperti penulisan contoh kode program.
Font Cursive
Sumber : etsy.com
Font ini bisa dibilang "meniru" tulisan tangan atau kaligrafi. Contoh dari font ini adalah Comic Sans. Font jenis ini biasanya digunakan untuk aspek tulisan yang tidak terlalu ‘formal’.
Font Fantasy
.png)
Sumber : dafont.com
Font dengan jenis ini adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll. Font jenis ini jarang digunakan untuk text halaman.
Penerapan Font-Family pada CSS
Untuk mengganti font pada CSS, kita menggunakan properti CSS "font-family". Berikut contohnya.
Script CSS
.p1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.p2{
font-family: 'Times New Roman', Times, serif;
}
Script pada HTML
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="p1">HTML merupakan bahasa markup yang harus dipelajari dalam pemrograman web</p>
<p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus iusto dolorum,
vitae hic voluptatem praesentium voluptates facere nostrum illum molestias iste aperiam
dolor officiis enim saepe a dolore quasi nemo.</p>
</body>
</html>
Hasil di browser
.png)
Dalam contoh diatas, menggunakan dua paragraf dalam <p> yang dipisahkan oleh class "p1" dan "p2". Nilai font yang digunakan adalah font-font yang diinginkan akan tampil di web browser. Nama-nama font yang disebutkan ini yang lebih dari satu dikarenakan adanya kemungkinan keterbatasan font yang ada pada perangkat pengguna.
Misalnya pada class "p1" memanggil font Verdana, Geneva, Tahoma, sans-serif. Web browser akan mencari font "Verdana" pertama kali pada perangkat pengguna. Jika tidak ditemukan, maka web browser akan mencari font selanjutnya, yakni Geneva. Begitupun seterusnya hingga font terakhir, yaitu "sans-serif" yang merupakan font generik.
Font jenis generik ini bisa bernilai 1 dari nilai berikut: serif, sans-serif, monospace, cursive, dan fantasy. Jika kita menuliskan font-family: serif, maka web browser akan mencari font standar dengan kategori serif yang terdapat di dalam perangkat pengguna. Penulisan font generik ini biasanya digunakan sebagai pilihan terakhir dalam nilai font-family.
CSS sendiri tidak membatasi seberapa banyak jenis font yang boleh digunakan untuk nilai font-family, bahkan bisa menulis 10 jenis font untuk 1 nilai font-family. Namun rata-rata web designer hanya membuat 3 pilihan, dimulai dari yang paling spesifik, sampai dengan jenis font yang paling umum (jenis font generik).
Aturan Penulisan Nama Font
- Untuk setiap penulisan nama font, huruf pertama pada tiap kata harus menggunakan huruf besar, contohnya: penulisan font “arial” harus ditulis menjadi “Arial”. Tetapi aturan ini tidak berlaku untuk font ‘generik’ seperti serif dan sans-serif.
- Untuk memisahkan antara satu font dengan font lainnya, gunakan tanda koma.
- Jika nama font memiliki spasi, maka harus ditulis didalam tanda kutip, seperti: ”Times New Roman”, "Courier New".
Kesimpulan
Penggunaan font-family ini dapat membuat font dalam halaman website menjadi menarik. Namun perlu diingat bahwa tidak semua pengguna memiliki font yang anda gunakan. Maka dari itu, gunakan beberapa pilihan font dalam satu font-family (kebanyakan hanya 3 saja) dimana yang terakhir gunakan font generik, seperti serif dan sans-serif.
.png&description=Mengubah jenis font dengan CSS (metode font-family)){kind=link}
0 Komentar