CSS Font

CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.

• Font Family
• Font Size
• Font Style
• Font Variant
• Font Weight
• Font Color

Font Family

CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.

CSS Font Family

Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font, pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family.

Cara penulisan:

property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default

Contoh penulisan:

h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}

Hasil:

Ini adalah Heading 1 (H1) menggunakan font Verdana

Ini adalah Heading 2 (H2) menggunakan font Times New Roman

Font Size

CSS font size menentukan ukuran font pada bagian tertentu. Dengan menggunakan property ini, memudahkan kita untuk mengatur ukuran font berbeda-beda dalam satu halaman website.

Cara penulisan:

property -> font-size
value -> Ada berbagai macam cara penulisan value sbb:

Menentukan ukuran font secara absolut:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Menentukan ukuran secara relatif:

• larger
• smaller

Menentukan berdasarkan ukuran pasti:

• Menggunakan satuan ukuran px, misalnya: 10px, 12px. Angka negatif tidak diperbolehkan.

Menentukan ukuran berdasarkan persen:

• Menentukan ukuran lebih besar atau lebih kecil sebesar x% dari ukuran font dari element sebelumnya (parent element). Misalnya: 110% atau 80%.

Contoh penulisan:

h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}

Hasil:

Ini adalah Heading 1 (H1) menggunakan ukuran pasti 14px

Ini adalah Heading 2 (H2) menggunakan ukuran pasti 12px

Font Style

CSS font style menentukan kemiringan font di bagian tertentu.

Ada 3 macam style yaitu:

• normal : default; browser menampilkan font secara normal
• Italic : browser menampilkan font miring
• oblique : browser menampilkan font oblique.

Perbedaan italic dan oblique:

Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style oblique, yang dibunakan adalah Trebuchet MS true type yang di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic dan oblique.

Cara penulisan:

property -> font-style

value -> normal, italic, oblique

Contoh penulisan:

h1 {

font-size: 14px;
font-style: italic;
}
h2 {
font-size: 12px;
font-style:oblique;
}

Hasil:

Ini adalah Heading 1 (H1) menggunakan style italic

Ini adalah Heading 2 (H2) menggunakan style oblique

 Font Variant

Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini.

Cara penulisan:

property -> font-variant

value -> small-caps

Contoh penulisan:

h1 {

font-size: 14px;
font-variant: small-caps;
}

Hasil:

Ini adalah Heading 1 (H1) menggunakan properti font variant

Font Weight
 Properti font weight digunakan untuk mengatur ketebalan font.

Cara penulisan:

property -> font-weight

value ->
normal
bold – tebal
bolder – lebih tebal
lighter – lebih tipis
100
200
300
400 – normal
500
600
700 – bold
800
900

Contoh penulisan:

h1 {

font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight:100;
}

Hasil:

Ini adalah Heading 1 (H1) menggunakan font weight bold

Ini adalah Heading 2 (H2) menggunakan font weight 100

Font Color

Properti color digunakan untuk menentukan warna font. Sebenarnya properti color bukan lah bagian dari properti font.

Cara penulisan:

property -> color

value ->
nama warna – contoh: red, black, white
hexadesimal – contoh: #ff0000
RGB – contoh: rgb(0, 220, 98)

Contoh penulisan:

h1 {

font-size: 14px;
color: red;
}
h2 {
font-size: 14px;
color: #0000ff;
}

Hasil:

Ini adalah Heading 1 (H1) menggunakan warna merah

Ini adalah Heading 2 (H2) menggunakan warna biru