Di bagian ini, anda akan mempelajari berbagai properti yang berhubungan dengan pengturan font seperti font-family, font-size, font-style, font-weight, font-variant
1. font-family
Properti font-family biasa disertakan dengan tujuan untuk mengatur font-font yang dipakai di halaman web. Contoh isi properti ini adalah sebagai berikut:
font-family: Arial, Verdana, Helvatical, Sans-serif;
Pada contoh seperti itu , font Arial yang akan digunakan untuk menampilkan teks. Namun, jika di komputer klien tidak mengandung font tersebut, font kedua (dalam ini Verdana) akan dipakai. Jika ternyata Verdana juga tidak ada, font berikutnya yang akan digunakan. Mekanisme seperti itulah yang digunakan untuk menggunakan font, dengan bergerak dari font terkiri yang ada di font-family menuju kekanan. Contoh penggunaan font-family adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>font family</title>
<style>
h2{
font-family: cursive, jokerman, sans-serif;
}
.teks{
font-family: monospace, arial;
}
</style>
</head>
<body>
<h2>Properti font-family</h2>
<div class="teks">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
2. font-size
Properti font-size digunakan untuk menentukan ukuran suatu font baik secara relatif atau absolute. Satuan ukuran yang bisa anda gunakan adalah yang telah dibahas di bagian sebelumnya.
Contoh : font-size: 20px;
Contoh tersebut menggunakan ukuran absolute. berikut contoh kode untuk melihat efek pengaturan font-size.
<!DOCTYPE html>
<html>
<head>
<title>font size</title>
<style>
h2{
font-size: 2em;
}
.teks1{
font-size: 10px;
}
.teks2{
font-size: 15px;
}
.teks3{
font-size: 20px;
}
</style>
</head>
<body>
<h2>Properti font-size</h2>
<div class="teks1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="teks2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
<div class="teks3">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</div>
</body>
</html>
3. font-style
Teks bisa dimiringkan melalui properti font-style yang diisi dengan italic. Adapun untuk menormalkannya, gunakan nilai normal. Contoh:
<!DOCTYPE html>
<html>
<head>
<title>font style</title>
<style>
.teks1{
font-style: italic;
}
.teks2{
font-style: normal;
}
</style>
</head>
<body>
<h2>Properti font-style</h2>
<div class="teks1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><br>
<div class="teks2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
</body>
</html>
4. font-weight
Properti font-weight digunakan untuk menebalkan font, nilai yang bisa diberikan ditunjukan pada tabel berikut:
| Nilai font-weight | Keterangan |
|---|---|
| Bold | Teks ditebalkan |
| Bolder | Teks ditebalkan relatif terhadap bobot orang tuanya. Banyak browser belum mengimplementasikannya |
| Normal | Teks normal. |
| 100, 200, 300, 400 500, 600, 700, 800, 900 | Menyatakan tingkat ketebalan. Dalam praktik, banyak browser belum mengimplementasikannya. |
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>font wight</title>
<style>
.teks2{
font-weight: bold;
}
</style>
</head>
<body>
<h2>Properti font-weight</h2>
<div class="teks1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><br>
<div class="teks2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</div>
</body>
</html>
5. font-variant
Properti font-variant berguna untuk membentuk tulisan dengan model "small caps" (Tulisan yang seluruhnya menggunakan huruf kapital, dengan huruf pertama agak tinggi). Nilai yang bisa diberikan adalah small-caps untuk membuat model "small caps" atau normal untuk membuat tulisan normal.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>font variant</title>
<style>
h2{
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Properti font-variant</h2>
<div class="teks1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</body>
</html>
6. Gabungan
Semua properti font tersebut bisa digabungkan menjadi satu dengan properti font. Prinsip dasarnya properti font dapat menyingkat penulisan sejumlah properti berikut:
- font-family (wajib)
- font-size (wajib)
- font-style (opsional)
- font-variant (opsional)
- font-waight (opsional)
- line-height (opsional, akan dijelaskan nanti)
<!DOCTYPE html>
<html>
<head>
<title>font</title>
<style>
h2{
font: bold italic small-caps 30px monospace, arial;
}
</style>
</head>
<body>
<h2>Properti font</h2>
<div class="teks1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</body>
</html>
0 comments for "BELAJAR CSS DASAR | mengatur font"
Post a Comment