The properti font CSS mendefinisikan font keluarga, keberanian, ukuran, dan gaya teks.
Perbedaan Antara Font Serif dan Sans-serif
Keluarga CSS Font
Dalam CSS, ada dua jenis nama keluarga font:
- keluarga generik - kelompok font keluarga dengan ekspresi yang sama (seperti "Serif" atau "Monospace")
- Kumpulan font - keluarga font tertentu (seperti "Times New Roman" atau "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Catatan: Pada layar komputer, font sans-serif dianggap lebih mudah untuk dibaca daripada font serif. |
|---|
Keluarga Font
Keluarga font teks diatur dengan font-family properti.
The font-family properti harus memegang beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya, dan seterusnya.
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.
Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New Roman".
Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan koma:
Untuk kombinasi huruf yang umum digunakan, melihat kami Web Aman Font Kombinasi .
Gaya tulisan
The font-style properti ini kebanyakan digunakan untuk menentukan teks miring.
Properti ini memiliki tiga nilai:
- biasa - Teks ditampilkan biasanya
- italic - Teks ditampilkan dalam huruf miring
- miring - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurang didukung)
Contoh
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Cobalah sendiri " Ukuran huruf
The font-size properti 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
| Catatan: Jika Anda tidak menentukan ukuran font, ukuran standar untuk teks normal, seperti paragraf, adalah 16px (16px = 1em). |
|---|
Set Ukuran Font Dengan Pixel
Mengatur ukuran teks dengan piksel memberikan Anda kontrol penuh atas ukuran teks:
Tip: Jika Anda menggunakan piksel, Anda masih dapat menggunakan alat zoom untuk mengubah ukuran seluruh halaman.
Set Ukuran Font Dengan Em
Untuk memungkinkan pengguna untuk mengubah ukuran teks (dalam menu browser), banyak pengembang 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
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 */
} Cobalah sendiri " 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.
Gunakan Kombinasi Persen dan Em
Solusi yang bekerja di semua browser, adalah untuk menetapkan standar font-size di persen untuk <body> elemen:
Contoh
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Cobalah sendiri " kode kita sekarang bekerja besar! Ini menunjukkan ukuran teks yang sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teks!
Berat Font
The font-weight properti menentukan berat font:
Font Variant
The font-variant properti menentukan apakah atau tidak sebuah teks harus ditampilkan dalam font kecil-caps.
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 lebih
Semua properti font dalam satu deklarasi
Contoh ini menunjukkan bagaimana menggunakan properti singkat untuk setting semua properti font dalam satu deklarasi.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
Semua CSS Font Properti
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |