Font

CSS Font
«Sebelumnya
Tonton video tutorial ini
Next Chapter »

Properti font CSS mendefinisikan keluarga font, keberanian, ukuran, dan gaya teks.
Perbedaan Antara Font Serif dan Sans-serif
Serif vs Sans-serif
CSS Font Keluarga

Dalam CSS, ada dua jenis nama keluarga font:

     keluarga generik - kelompok font keluarga dengan ekspresi yang sama (seperti "Serif" atau "Monospace")
     Font keluarga - keluarga font tertentu (seperti "Times New Roman" atau "Arial")

Keluarga generik Keluarga font Keterangan
Serif Times New Roman
Georgia Serif font memiliki garis-garis kecil di ujung pada beberapa karakter
Sans-serif Arial
Verdana "Sans" berarti tanpa - font ini tidak memiliki garis-garis pada ujung karakter
Monospace Courier New
Lucida Console Semua karakter monospace memiliki lebar yang sama

Catatan Catatan: Pada layar komputer, sans-serif font dianggap lebih mudah untuk dibaca daripada font serif.

Font Family

Keluarga font teks yang dibuat dengan properti font-family.

Properti font-family harus memegang beberapa nama font sebagai "fallback" sistem. Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.

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:
contoh
p {
     font-family: "Times New Roman", Times, serif;
}

Cobalah sendiri »

Untuk lebih umum digunakan kombinasi huruf, kami melihat Safe Web Font Kombinasi.
Gaya Font

Properti font-style banyak digunakan untuk menetapkan teks miring.

Properti ini memiliki tiga nilai:

     biasa - Teks ditampilkan biasanya
     italic - Teks ditampilkan dengan 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: miring;
}

Cobalah sendiri »

Font Size

Properti font-size menetapkan ukuran teks.

Mampu mengatur ukuran teks 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 dapat 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 absolut berguna ketika ukuran fisik output diketahui

Ukuran relatif:

     Mengatur ukuran relatif terhadap elemen sekitarnya
     Memungkinkan pengguna untuk mengubah ukuran teks dalam browser


Catatan Catatan: Jika Anda tidak menentukan ukuran font, ukuran standar untuk teks biasa, seperti paragraf, adalah 16px (16px = 1em).

Mengatur Ukuran Font Dengan Pixel

Mengatur ukuran teks dengan piksel memberi Anda kontrol penuh atas ukuran teks:
contoh
h1 {
     font-size: 40px;
}

h2 {
     font-size: 30px;
}

p {
     font-size: 14px;
}

Cobalah sendiri »

Tip: Namun, Anda masih dapat menggunakan alat zoom untuk mengubah ukuran seluruh halaman.
Mengatur 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 1em adalah 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 bila 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 mengatur font-size default 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;
}