Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai CSS Font.
Properti Font CSS mendefinisikan font family, keberanian, ukuran, dan gaya teks.
Perbedaan Antara Font Serif dan Sans Serif
Keluarga CSS Font
Dalam CSS, ada dua jenis nama font family:
- generic family - kelompok font keluarga dengan ekspresi yang sama (seperti "Serif" atau "Monospace").
- kumpulan font - keluarga font tertentu (seperti "Timew New Roan" atau "Arial").
Keluarga Font
Keluarga font teks diatur dengan font-family properti.
Tag font-family harus memegang beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya, dst.
Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">Ini adalah sebuah paragraf, ditampilkan dalam font Times New Roman.</p>
<p class="sansserif">ni adalah sebuah paragraf, ditampilkan dalam font Arial.</p>
</body>
</html>
Hasil:
Font Style
Tag font-style ini kebanyakan digunakan untuk menentukan teks miring.
Properti ini memiliki tiga nilai:
- normal - Teks ditampilkan biasanya
- italic - Teks ditampilkan dalam huruf miring
- oblique - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurung didukung).
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Ini adalah sebuah paragraf dalam gaya normal.</p>
<p class="italic">Ini adalah sebuah paragraf dalam gaya italic.</p>
<p class="oblique">Ini adalah sebuah paragraf dalam gaya oblique.</p>
</body>
</html>
Hasil:
Font Size
Tag font-size menetapkan ukuran teks.
Mampu mengatur ukuran teks adalah penting dalam desain web. Namun, Anda tidak harus menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti pos, atau pos tampak seperti paragraf.
Selalu gunakan tag HTML yang tepat, seperti <h1> -<h6> untuk judul dan <p> untuk paragraf.
Nilai font-size bisa menjadi ukuran mutlak, atau relatif.
Ukuran absolut:
Mengatur teks ke ukuran tertentu.
Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
Ukuran mutlak berguna ketika ukuran fisik output dikenal.
Ukuran relatif:
- Mengatur ukuran relatif terhadap elemen sekitarnya.
- Memungkinkan pengguna untuk mengubah ukuran teks dalam browser.
Set Ukuran Font Dengan Pixel
Mengatur ukuran teks dengan piksel memberikan Anda kontrol penuh ata ukuran teks.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<p>Ini adalah sebuah paragraph.</p>
<p>Ini adalah paragraf lainnya.</p>
</body>
</html>
Hasil:
Set Ukuran Font Dengan Em
Untuk memungkinkan pengguna untuk mengubah ukuran teks (dalam menu browser), banyak pegembang menggunakan em bukan piksel.
Unit ukuran em direkomendasikan oleh W3C.
1em sama dengan ukuran font saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default dari 1em 16px.
Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini : pixels / 16 = em.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<p>Ini adalah sebuah paragraf.</p>
<p>Menentukan font-size di em memungkinkan semua browser utama untuk mengubah ukuran teks.
Sayangnya, masih ada masalah dengan versi IE. Ketika mengubah ukuran teks, menjadi lebih besar / kecil dari seharusnya.</p>
</body>
</html>
Hasil:
Dalam contoh di atas, ukuran teks dalam em adalah sama dengan contoh sebelumnya dalam pixel. Namun, dengan ukuran em, adalah mungkin untuk menyesuaikan ukuran teks dalam semua browser.
Sayangnya, masih ada masalah dengan versi IE. teks menjadi lebih besar dari yang seharusnya jika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
Sayangnya, masih ada masalah dengan versi IE. teks menjadi lebih besar dari yang seharusnya jika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
Gunakan Kombinasi Persen dan Em
Solusi yang bekerja di semua browser, adalah untuk menetapkan standar font-size di persen untuk <body> elemen.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<p>Ini adalah sebuah paragraf.</p>
<p>Menentukan font-size dalam persen dan em menampilkan ukuran yang sama di semua browser utama, dan memungkinkan semua browser untuk mengubah ukuran teks!</p>
</body>
</html>
Hasil:
kode kita sekarang bekerja besar! Ini menunjukkan ukuran teks yang sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teks!
Font Weight
Tag font-weight menentukan berat huruf.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Ini adalah sebuah paragraf.</p>
<p class="light">Ini adalah sebuah paragraf.</p>
<p class="thick">Ini adalah sebuah paragraf.</p>
<p class="thicker">Ini adalah sebuah paragraf.</p>
</body>
</html>
Hasil:
Font Variant
Tag font-variant menentukan apakah sebuah teks harus ditampilkan dalam font kecil-caps atau tidak.
Dalam font kecil-caps, semua huruf kecil dikonversi ke huruf besar. Namun, huruf besar dikonversi muncul dalam ukuran font lebih kecil dari huruf besar asli dalam teks.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Nama saya adalah Allif.</p>
<p class="small">Nama Saya adalah Allif.</p>
</body>
</html>
Hasil:
REFERENSI
No comments:
Post a Comment