CSS Font

CSS Font Families

Dalam CSS, ada dua jenis nama keluarga font:

1. keluarga generik - kelompok font keluarga dengan ekspresi yang sama (seperti "Serif" atau "Monospace")

2. Font keluarga - 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

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:

p {
    font-family: "Times New Roman", Times, serif;
}

Font Style

Properti font-style banyak digunakan untuk menetapkan teks miring.

Properti ini memiliki tiga nilai:

1. biasa - Teks ditampilkan biasanya

2. talic - Teks ditampilkan dengan huruf miring

3. miring - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurang didukung)

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

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

Set Font Size With Pixels

Mengatur ukuran teks dengan piksel memberi Anda kontrol penuh atas ukuran teks:

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Set Font Size With 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 di 16px.

Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini: pixels / 16 = em

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 */
}

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.

Use a Combination of Percent and Em

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}