Pada tutorial sebelumnya kita sudah belajar tentang Tutorial Belajar CSS Bagian 38 : Cara Menggunakan Property Float di CSS. Pada tutorial kali ini,kita akan belajar tentang pengunaan property font di CSS.
Properti Font CSS digunakan untuk mengontrol tampilan teks. Dengan menggunakan properti font CSS Anda dapat mengubah ukuran teks, warna, gaya, dan lainnya.
Anda telah mempelajari cara membuat teks tebal atau bergaris bawah. Di sini, Anda juga akan mengetahui cara mengubah ukuran font menggunakan persentase.
Ini adalah beberapa atribut font penting:
- CSS Font color : Properti ini digunakan untuk mengubah warna teks. (atribut mandiri)
- CSS Font family : Properti ini digunakan untuk mengubah tampilan font.
- CSS Font size : Properti ini digunakan untuk menambah atau mengurangi ukuran font.
- CSS Font style : Properti ini digunakan untuk membuat font tebal, miring, atau miring.
- CSS Font variant : Properti ini menciptakan efek huruf kecil.
- CSS Font weight : Properti ini digunakan untuk menambah atau mengurangi ketebalan dan keringanan font.
1. CSS Font Color
CSS Font color adalah atribut yang berdiri sendiri di CSS meskipun tampaknya itu adalah bagian dari font CSS. Digunakan untuk mengubah warna teks.
Ada tiga format berbeda untuk menentukan warna:
- Dengan nama warna
- Dengan nilai heksadesimal
- Dengan RGB
Dalam contoh berikut, kita telah mendefinisikan semua format ini.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>Ini adalah judul 1</h1>
<h2> Ini adalah judul 2</h2>
<p>Ini adalah paragraph.</p>
</body>
</html>
Hasil dari kode di atas adalah :
2. CSS Font family
CSS Font family dapat dibagi menjadi 2 jenis:
- Generic family : Ini termasuk Serif, Sans-serif, dan Monospace.
- Font family : Ini menentukan nama keluarga font seperti Arial, New Times Roman dll.
Serif : Font serif menyertakan garis kecil di akhir karakter. Contoh serif: Times new roman, Georgia dll.
Sans-serif : Font sans-serif tidak menyertakan garis kecil di akhir karakter. Contoh Sans-serif: Arial, Verdana dll.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>Judul ini menggunakan jenis huruf sans-serif.</h1>
<h2>Judul ini menggunakan jenis huruf serif.</h2>
<p>Paragraph ini ditulis menggunakan jenis huruf monospace.</p>
</body>
</html>
Hasil dari kode di atas adalah :
3. CSS Font Size
Properti CSS Font Size digunakan untuk mengubah ukuran font.
Berikut nilai yang mungkin digunakan untuk mengatur ukuran font :
| Nilai Font Size | Deskripsi |
| xx-small | digunakan untuk menampilkan ukuran teks yang sangat kecil. |
| x-small | digunakan untuk menampilkan ukuran teks ekstra kecil. |
| small | digunakan untuk menampilkan ukuran teks kecil. |
| medium | digunakan untuk menampilkan ukuran teks sedang. |
| large | digunakan untuk menampilkan ukuran teks yang besar |
| x-large | digunakan untuk menampilkan ukuran teks ekstra besar. |
| xx-large | digunakan untuk menampilkan ukuran teks yang sangat besar. |
| smaller | digunakan untuk menampilkan ukuran teks yang relatif lebih kecil. |
| larger | digunakan untuk menampilkan ukuran teks yang relatif lebih besar. |
| size dalam pixels atau % | digunakan untuk menetapkan nilai dalam persentase atau dalam piksel. |
<html>
<head>
<title>Contoh Praktek CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> Ukuran font ini sangat kecil.</p>
<p style="font-size:x-small;"> Ukuran font ini ekstra kecil </p>
<p style="font-size:small;"> Ukuran font ini kecil </p>
<p style="font-size:medium;"> Ukuran font ini sedang.</p>
<p style="font-size:large;"> Ukuran font ini besar. </p>
<p style="font-size:x-large;"> Ukuran font ini ekstra besar. </p>
<p style="font-size:xx-large;"> Ukuran font ini sangat besar. </p>
<p style="font-size:smaller;"> Ukuran font ini lebih kecil. </p>
<p style="font-size:larger;"> Ukuran font ini lebih besar. </p>
<p style="font-size:200%;"> Ukuran font ini diaktifkan 200%. </p>
<p style="font-size:20px;"> Ukuran font ini adalah 20 piksel. </p>
</body>
</html>Hasil dari kode ini adalah :
4. CSS Font Style
Properti CSS font style menentukan jenis font apa yang ingin Anda tampilkan. Bisa italic, oblique atau normal.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2> Judul ini ditampilkan dalam huruf miring.</h2>
<h3> Judul ini ditampilkan dalam font miring.</h3>
<h4> Judul ini ditampilkan dalam font normal.</h4>
</body>
</html>
Hasil dari kode di atas adalah :
5. CSS Font Variant
Properti CSS font variant menentukan cara mengatur varian font suatu elemen. Bisa normal dan small-caps.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3> Judul ini ditampilkan dalam font normal.</h3>
<p> Paragraf ini ditampilkan dalam huruf kecil.</p>
</body>
</html>
Hasil dari kode di atas adalah :
6. CSS Font Weight
Properti CSS font weight menentukan bobot font dan menentukan seberapa tebal font itu. Nilai yang mungkin dari bobot font mungkin normal, tebal, lebih tebal, lebih ringan atau angka (100, 200….. hingga 900).
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;"> Font ini tebal.</p>
<p style="font-weight:bolder;"> Font ini lebih tebal.</p>
<p style="font-weight:lighter;"> Font ini lebih ringan.</p>
<p style="font-weight:100;"> Font ini 100 weight.</p>
<p style="font-weight:200;"> Font ini 200 weight.</p>
<p style="font-weight:300;"> Font ini 300 weight.</p>
<p style="font-weight:400;"> Font ini 400 weight.</p>
<p style="font-weight:500;"> Font ini 500 weight.</p>
<p style="font-weight:600;"> Font ini 600 weight.</p>
<p style="font-weight:700;"> Font ini 700 weight.</p>
<p style="font-weight:800;"> Font ini 800 weight.</p>
<p style="font-weight:900;"> Font ini 900 weight.</p>
</body>
</html>
Hasil dari kode di atas adalah :
Itu dia tutorial belajar cara menggunakan property font di CSS untuk mengatur desain dari huruf agar terlihat semakin bagus.
