Font CSS ~ KODELOVER

properti font CSS menentukan keluarga font, boldness, ukuran, dan gaya teks.
perbedaan Antara Serif dan Sans-serif Fonts

Keluarga Font CSS

Di CSS, ada dua jenis nama keluarga font:

Keluarga generik - sekelompok keluarga font dengan tampilan serupa (seperti "Serif" atau "Monospace")
Keluarga font - keluarga font tertentu (seperti "Times New Roman" atau "Arial")

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

pada layar komputer, font sans-serif dianggap lebih mudah dibaca daripada font serif.

Keluarga font

Keluarga huruf dari teks diatur dengan properti font-family.

properti font-family harus menyimpan beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, browser akan mencoba font berikutnya, dan seterusnya.

Mulailah dengan font yang Anda inginkan, dan akhiri dengan keluarga generik, biarkan browser memilih font yang serupa di keluarga generik, jika tidak ada font lain yang tersedia.

Catatan: Jika nama keluarga font lebih dari satu kata, itu harus dalam tanda petik, seperti: "Times New Roman".

Lebih dari satu keluarga font ditentukan dalam daftar yang dipisahkan koma:
Contoh

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

Gaya tulisan

properti font-style ini banyak digunakan untuk menentukan teks italic.

properti ini memiliki tiga nilai:

    normal - Teks ditampilkan secara normal
    italic - Teks ditampilkan dalam huruf miring
    oblique - Teksnya "bersandar" (miring sangat mirip dengan huruf miring, tapi kurang didukung)

Contoh:

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Ukuran huruf

properti ukuran huruf mengatur ukuran teks.

Mampu mengelola ukuran teks penting dalam desain web. Namun, sebaiknya tidak menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti judul, atau judul terlihat seperti paragraf.

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

Nilai ukuran font bisa menjadi ukuran absolut atau relatif.

Absolute size (Ukuran mutlak):

    Menetapkan teks ke ukuran yang ditentukan
    Tidak mengizinkan pengguna mengubah ukuran teks di semua browser (Tidak baik untuk aksesibilitas)
    Ukuran absolut sangat berguna bila ukuran fisik dari output diketahui

Relative size (Ukuran relatif)

    Menetapkan ukuran relatif terhadap elemen sekitarnya
    Mengizinkan pengguna mengubah ukuran teks di browser

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

Tetapkan Ukuran Font Dengan piksel

Menetapkan ukuran teks dengan piksel memberi Anda kontrol penuh atas ukuran teks:
Contoh

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Tip: Jika Anda menggunakan piksel, Anda tetap dapat menggunakan "zoom tool" untuk mengubah ukuran keseluruhan halaman.

Tetapkan Ukuran Font Dengan Em

Agar pengguna dapat mengubah ukuran teks (di menu browser), banyak pengembang menggunakannya daripada piksel.

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

pada contoh di atas, ukuran teks di dalamnya sama dengan contoh sebelumnya dalam piksel. Namun, dengan ukuran em, Anda dapat menyesuaikan ukuran teks di semua browser.

Sayangnya, masih ada masalah dengan versi IE yang lebih lawas. Teks menjadi lebih besar dari seharusnya bila dibuat lebih besar, dan lebih kecil dari seharusnya bila dibuat lebih kecil.

Gunakan Kombinasi persen dan Em

Solusi yang bekerja di semua browser, adalah menetapkan ukuran font default dalam persen untuk elemen <body>:

Contoh

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Kode tersebut sekarang optimal karena menunjukkan ukuran teks yang sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teksnya!

Berat Font/weight font

properti font-weight menentukan bobot font:
Contoh

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Varian huruf

Properti font-variant menentukan apakah sebuah teks harus ditampilkan dalam font huruf kecil atau kecil.

Dalam huruf kecil huruf, semua huruf kecil diubah menjadi huruf besar. Namun, huruf besar yang dikonversi muncul dalam ukuran huruf yang lebih kecil daripada huruf besar asli dalam teks.
Contoh

p.normal {
font-variant: normal;
}

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

Semua Properti Font CSS

font Mengatur semua properti font dalam satu deklarasi
font-family Menentukan keluarga font untuk teks
size huruf Menentukan ukuran font teks
font-style Menentukan gaya font untuk teks
font-variant Menentukan apakah sebuah teks harus ditampilkan dalam font huruf kecil atau tidak
font-weight Menentukan berat font

KODELOVER

Font CSS

Related Post