Dalam tutorial css kali ini kita akan membahas bagaimana caranya mengatur font pada css. Font atau huruf adalah sebuah alat komunikasi cetak secara visual, namun dalam hal penulisan setiap paragraf pasti memiliki gaya berbeda pada poin-poin tertentu yang memang perlu ditegaskan atau kata dalam bahasa asing yang perlu di miringkan.
Jika dalam microsoft word hal tersebut sangat mudah dilakukan, pengguna hanya tinggal menggunakan tombol italic, bold dan lain sebagainya, namun bagaimana jika dalam css? kita sebagai programmer berbeda dengan mengatur font pada css meskii dapat melakukan perilaku yang sama dengan microsoft word tersebut hanya caranya saja yang berbeda.
Mengatur Font Pada CSS
Dalam dunia pemrograman dan kita sebagai programmer tentunya akan menyederhanakan kode-kode yang dibuat agar sampai pada pengguna dalam bentuk visual yang mudah untuk dibaca. Begitupun dalam perangkat lunak office, programmer mereka telah menyederhanakan kode-kode rumit mereka untuk kita gunakan dengan mudah.
Untuk dapat mengatur font pada css kita perlu menggunakan properti font, dimana properti font memiliki turunan properti-properti yang lainnya, meskipun properti font sendiri dapat mewakili properti lainnya, tetapi kadang-kadang kita tidak membutuhkan properti font itu sendiri. Berikut ini tabel properti-properti font yang akan kita bahas.
| Properti | Keterangan |
|---|---|
| font-family | Properti font-family digunakan untuk mengubah jenis huruf yang akan digunakan |
| font-style | Properti font-style digunakan untuk menentukan gaya font apakah italic atau oblique |
| font-variant | Properti font-variant berguna untuk membuat efek small-caps. |
| font-weight | Untuk menentukan ketebalan jenis huruf yang akan digunakan |
| font-size | Untuk mengatur ukuran huruf yang akan digunakan |
| font | Properti singkat yang dapat mewakili properti font yang lainnya |
Dari tabel diatas masing-masing properti font akan kita bahas secara mendetail, maka dari itu setelah mengenal properti-properti tersebut penulis berharap pembaca bereksperimen sendiri untuk mengembangkan sintaks css ini.
Mengatur Jenis Huruf Pada CSS
Untuk dapat mengatur jenis huruf pada css ini properti yang digunakan adalah font-family. Misalnya kita ingin mengubah jenis huruf seperti arial, times new roman dan lain sebagainya. Berikut ini contoh kodenya.
<!DOCTYPE html>
<html>
<head>
<title>CSS Font</title>
<style type="text/css">
p {
font-family: Arial;
}
</style>
</head>
<body>
<p>Ini adalah jenis font-family Arial</p>
</body>
</html>Code language: HTML, XML (xml)Dari kode diatas sebuah properti font-family memiliki nilai Arial yang diarahkan ke selector p, dimana pada setiap paragraf akan menampilkan tulisan dengan gaya huruf atau jenis huruf Arial. Jika dari kode diatas untuk mengatur jenis huruf hanya satu, maka kita bisa mengatur huruf dengan memprioritaskan satu huruf, dari tiga jenis huruf yang kita berikan dinilai properti font-family.
Kegunaan memprioritaskan satu jenis huruf ini bertujuan apabila huruf yang telah kita deklarasikan pada css ternyata tidak dimiliki oleh komputer yang menerima halaman website kita maka akan secara otomatis mengubah ke jenis huruf lain, berikut ini kodenya.
<style type="text/css">
p {
font-family: 'Arial', Georgia, Serif;
}
</style>Code language: HTML, XML (xml)Jika diperhatikan pada kode diatas, tipe arial memiliki tanda kutip, hal tersebut artinya bahwa jenis arial telah diprioritaskan di css pada halaman web yang telah kita buat, namun apabila komputer client yang membuka halama web kita tidak terinstall font jenis arial akan secara otomatis mengubah ke font lain yang ada di komputer client tersebut.
Mengatur Gaya Huruf Pada CSS
Apakah gaya huruf yang dimaksud ditutorial ini? gaya huruf yang dimaksud adalah seperti gaya cetak miring dan oblique, karna pada dasarnya secara bawaan gaya font yang dihasilkan adalah normal, agar browser membaca gaya huruf yaitu dengan menggunakan properti font-style, contoh kode dibawah ini akan menampilkan tulisan cetak miring.
<style type="text/css">
p {
font-style: italic;
}
</style>Code language: HTML, XML (xml)Nilai-nilai yang terkandung didalam properti font-style antara lain normal, italic, dan oblique. Silahkan dan bereksperimen untuk mengetahui lebih lanjut penggunaan properti font-style.
Mengatur Variant Huruf Pada CSS
Jika anda sering menggunakan perangkat lunak office, maka seharusnya sering mendengar istilah small-caps. Nah, di css ini untuk mengatur variant huruf small-caps dapat dengan menggunakan properti font-variant. Contoh kodenya.
<style type="text/css">
p {
font-variant: small-caps;
}
</style>Code language: HTML, XML (xml)Fungsi small-caps itu sendiri adalah untuk mengatur huruf agar tercetak seluruhnya huruf besar namun dengan ukuran yang kecil.
Mengatur Ketebalan Huruf Pada CSS
Untuk dapat mengatur ketebalan huruf pada css menggunakan properti font-weight dengan nilai bold, meskipun bisa dengan nilai integer seperti 400, 500 dan lain sebagainya, itu tergantung apakah font tersebut mendukung ketebalan tersebut. Contoh Kodenya.
<style type="text/css">
p {
font-weight: bold;
}
</style>Code language: HTML, XML (xml)Properti font-weight ini sebenarnya memiliki lebih dari satu nilai, seperti dikatakan diatas tergantung apakah font tersebut mendukung jenis ketebalan lainnya, namun normalnya adalah bold.
Mengatur Ukuran Font Pada CSS
Untuk dapat mengatur ukuran font atau ukuran huruf pada css yaitu dengan menggunakan properti font-size. Mengingat satuan ukuran pada css telah kita bahas pada tutorial yang lalu, jadi saya lanjutkan saja, jika ada yang belum membacanya silahkan cari di kategori css.
<style type="text/css">
p {
font-size: 12pt; /* pt adalah jenis satuan ukuran */
}
</style>Code language: HTML, XML (xml)Menggunakan Properti Font Pada CSS
Properti font sebenarnya sudah dapat mewakili properti-properti yang lainnya, namun terkadang pada beberapa kasus kita tidak membutuhkannya. Tetapi perlu dibahas karna sering juga dipakai dalam hal pengembangan aplikasi.
font: style variant weight size family;Code language: HTTP (http)berikut ini contoh kode lengkapnya…
<style type="text/css">
p {
font: italic small-caps bold 15px georgia;
}
</style>Code language: HTML, XML (xml)Jika diperhatiakn pada nilai-nilai yang ada di properti font ini dimiliki oleh properti properti lain. Properti font tidak harus didefinisikan seperti sintaks diatas, properti font akan membaca nilai sesuai dengan keyword yang diberikan.
Demikian tutorial mengatur font pada css, semoga tutorial ini dapat membantu dan dapat bermanfaat bagi pembaca.
