Kursus Membuat Web

iklan

Font CSS

Property font CSS mendefinisikan font family, boldness, size, dan style dari teks.

Perbedaan antara font Serif dan Sans-serif

font serif

Font Family CSS

Pada CSS, ada dua nama untuk font family :

  • generic family - kelompok font family yang terlihat sama (seperti "Serif" atau "Monospace")
  • font family - font family tertentu (seperti "Times New Roman" atau "Arial")
Generic Family Font Family Keterangan
Serif Times New Roman
Georgia
Font Serif memiliki garis kecil diujungnya
Sans-serif Arial
Verdana
"Sans" maksudnya tanpa - font ini tidak memiliki garis kecil diujungnya
Monospace Courier New
Lucida
Console
Semua karakter monospace memiliki lebar yang sama

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

Font Family

Font family sebuah teks diatur dengan property font-family.

Property font-family harus memasukkan beberapa nama font. Jika browser tidak mendukung font yang pertama, maka mencoba font berikutnya.

Mulailah dengan font yang Anda inginkan, dan dengan generic family, agar browser memilih font yang sama dalam generic family, jika tidak ada font lain yang tersedia.

Catatan: Jika nama dari font family lebih dari satu kata, maka beri tanda petik dua, seperti: "Times New Roman".

Menentukan lebih dari satu font family maka dipisah dengan koma (,):

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

Kombinasi font yang umum digunakan, lihat di Kombinasi Font Yang Tepat

Font Style

Property font-style umumnya digunakan untuk menetapkan teks italic.

Property ini memiliki 3 nilai :

  • normal - Teks ditampilkan normal
  • italic - Teks ditampilkan italic
  • oblique - Teks miring (oblique sangat mirip dengan italic)
p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}
Lihat ...

Font Size

Property font-size mengatur ukuran teks.

Mampu untuk mengatur ukuran teks sangat penting dalam mendesign web.

Selalu gunakan HTML tag yang tepat, seperti <h1> – <h6> untuk heading dan <p> untuk paragraf.

Nilai font-size bisa absolute, atau relative.

Note: Jika Anda tidak menentukan font size, secara default ukurannya adalah teks normal, misal paragraf, adalah 16px (16px=1em).

Mengatur Font Size Dengan Pixel

Mengatur ukuran teks dengan pixel memberkan Anda kontrol penuh terhadap ukuran teks:

h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
p {
    font-size: 14px;
}
Lihat ...

Mengatur Font Size Dengan Em

Untuk memungkinkan pengguna untuk mengubah ukuran teks (dalam menu browser), banyak pengembang menggunakan em bukan pixel.

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 pixel ke em menggunakan rumus ini : pixel / 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 */
}
Lihat ...

Pada 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, pada saat tulisan ini Saya tulis, masih ada masalah dengan versi IE. Teks menjadi lebih besar dari yang seharusnya jika dibuat lebih besar, dan lebih kecil dari yang seharusnya saat dibuat lebih kecil.

Menggunakan Kombinasi Persen dan Em

Solution agar bisa bekerja di semua browser, adalah dengan menetapkan font-size default dalam persen pada elemen <body> :

body {
    font-size: 100%;
}
h1 {
    font-size: 2.5em;
}
h2 {
    font-size: 1.875em;
}
p {
    font-size: 0.875em;
}
Lihat ...

Beberapa Contoh Untuk di Praktekkan Sendiri

p.normal {
    font-weight: normal;
}
p.light {
    font-weight: lighter;
}
p.thick {
    font-weight: bold;
}
p.thicker {
    font-weight: 900;
}

Mengatur boldness dari font

Contoh ini menunjukkan bagaimana mengatur boldness dari font.

p.normal {
    font-variant: normal;
}
p.small {
    font-variant: small-caps;
}

Mengaur variant dari font

Contoh ini menunjukkan bagaimana mengatur variant dari font.

p.ex1 {
    font: 15px arial, sans-serif;
}
p.ex2 {
    font:italic bold 12px/30px Georgia, serif;
}

Semua property font dalam satu deklarasi

Contoh ini menunjukkan bagaimana menggunakan property singkat untuk mengatur semua property font dalam satu deklarasi.

Semua Propery Font CSS

Property Keterangan
font Mengatur semua property font dalam satu deklarasi
font-family Mengatur font family untuk teks
font-size Mengatur ukuran font untuk teks
font-style Mengatur font style untuk teks
font-variant Menentukan apakah teks harus ditampilkan dalam font small-caps
font-weight Menentukan weight dari font

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015