-->

Iklan bawah header

Belajar CSS : Mengatur Font dengan CSS

font pada css

Pada tutorial ini kita akan belajar tentang cara mengatur font dengan CSS, disini akan dijelaskan tentang bagaimana cara untuk melakukan pengaturan font dengan CSS misalnya seperti mengatur ketebalan font, jenis font yang dipakai, gaya font, ukuran font dan lainnya.

Berikut beberapa property yang digunakan untuk mengatur font:

font-size

Font-size merupakan property pada CSS yang digunakan untuk menentukan ukuran font pada teks. Kalian bebas untuk merubah ukuran teks pada HTML yang nantinya akan ditampilkan pada halaman website.

Untuk menentukan ukuran font pada teks, kalian bisa memilih untuk menggunakan salah satu dari value / nilai yang tersedia pada property font-size. Berikut ini adalah value / nilai yang bisa digunakan pada property font-size :

No Value Value
1 x-small x-large
2 small large
3 xx-small xx-large
4 smaller larger
5 medium initial
6 ..px, ..em, dll ..%

Untuk penggunaannya, kalian bisa lihat contoh kode berikut ini.


<!DOCTYPE html>
<html>
<head>
<title>Font</title>
<style>
.font1 {
font-size: smaller;
}
.font2 {
font-size: larger;
}
.font3 {
font-size: 30px;
}
</style>
</head>
<body>
<p class="font1">Ukuran font ini diatur dengan value 'smaller'</p>
<p class="font2">Ukuran font ini diatur dengan value 'larger'</p>
<p class="font3">Ukuran font ini diatur dengan value '30px'</p>
</body>
</html>

Berikut hasilnya

font-style

Property ini digunakan untuk memberi gaya penulisan teks pada suatu elemen atau selector. font-style sering digunakan untuk membuat teks menjadi miring (italic). Berikut beberapa value / nilai dari property font-style :

No value Deskripsi
1 italic untuk membuat teks menjadi miring
2 normal untuk menampilkan teks dengan gaya yang normal
3 oblique untuk membuat teks menjadi lebih miring dari 'italic'

font-family

font-family merupakan property CSS yang digunakan untuk menentukan dan merubah jenis font yang digunakan pada teks. Property ini digunakan hampir di seluruh elemen HTML, mulai dari judul, heading, menu, paragraf, dll. Untuk penjelasan yang lebih detail bisa kalian lihat di Belajar Cara Mengubah Font dengan CSS.

font-weight

Properti ini digunakan untuk menentukan ketebalan pada teks. Dengan properti ini kamu bisa membuat teks menjadi tebal. Berikut beberapa value / nilai yang terdapat dalam properti font-weight:

No value Deskripsi
1 bold Untuk mengubah font pada teks / karakter menjadi tebal
2 bolder Untuk membuat font pada teks atau karakter menjadi lebih tebal
3 lighter Untuk membuat font pada teks atau karakter menjadi lebih tipis
4 normal Untuk membuat font pada teks atau karakter menjadi normal
5 initial Untuk mengatur value menjadi default
6 100, 200, ... ,900 Untuk mengatur ketebalan berdasarkan ukuran nilai yang dipilih

font-variant

font-variant merupakan properti yang digunakan untuk menentukan teks yang ditampilkan dalam bentuk huruf kecil atau huruf besar. Value atau nilai dari properti ini yaitu normal, small-caps, initial. Untuk penggunaanya bisa kalian lihat contoh berikut ini


<!DOCTYPE html>
<html>
<head>
<title>font-variant</title>
<style>
.normal {
font-variant: normal;
font-family: 'arial', sans-serif;
}
.small-caps {
font-variant: small-caps;
font-family: 'arial', sans-serif;
}
</style>
</head>
<body>
<p>ini menggunakan nilai 'normal'</p>
<p>ini menggunakan nilai 'small-caps'</p>
</body>
</html>

Berikut hasilnya

font

Property ini merupakan properti yang digunakan untuk mempersingkat dalam penulisan properti font lainnya. Untuk lebih jelasnya bisa kalian lihat pada contoh berikut ini.


.dua-nilai {
font: 15px/15px arial, sans-serif;
}
.empat-nilai {
font: italic bolder 20px/25px arial, sans-serif;
}
.lima-nilai {
font: italic small-caps bold 30px/40px arial,sans-serif;
}

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel