Font - Trik CSS | CSS Almanak 2025

The fontproperti di CSS adalah properti singkatan yang menggabungkan semua sub-properti di deklarasi tunggal.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Ada tujuh fontsub-properti, termasuk:

font-stretch: properti ini menyetel lebar font, seperti diringkas atau diperluas.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: membuat teks tampak miring atau miring.
- normal
- italic
- oblique
- inherit
font-variant: mengubah teks target menjadi huruf kecil.
- normal
- small-caps
- inherit
font-weight: mengatur bobot atau ketebalan font.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: mengatur tinggi font.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: menentukan jumlah spasi di atas dan di bawah elemen sebaris.
- normal
- number (font-size multiplier)
- percentage
font-family: mendefinisikan fonta yang diterapkan ke elemen.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Jenis huruf Singkatan Gotchas

The fontproperti tidak sesederhana sifat singkatan lainnya, sebagian karena persyaratan sintaks untuk itu, dan sebagian karena masalah warisan.

Berikut adalah ringkasan dari beberapa hal yang harus Anda ketahui saat menggunakan properti singkatan ini.

Nilai Wajib

Dua nilai dalam fontsingkatan adalah wajib: font-sizedan font-family. Jika salah satu dari ini tidak disertakan, seluruh deklarasi akan diabaikan.

Juga, font-familyharus dideklarasikan terakhir dari semua nilai, jika tidak, sekali lagi, seluruh deklarasi akan diabaikan.

Nilai Opsional

Kelima nilai lainnya adalah opsional. Jika Anda termasuk salah font-style, font-variantdan font-weight, mereka harus datang sebelum font-sizedalam deklarasi. Jika tidak, mereka akan diabaikan dan juga dapat menyebabkan nilai wajib diabaikan.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Dalam contoh di atas, tiga pilihan disertakan. Selama ini didefinisikan sebelumnya font-size, mereka dapat ditempatkan dalam urutan apa pun.

Menyertakan line-heightjuga opsional tetapi dapat dideklarasikan hanya setelah font-sizedan hanya setelah garis miring:

body ( font: 44px/20px Georgia, sans-serif; )

Dalam contoh di atas, line-heightadalah "20px". Jika Anda menghilangkan line-height, Anda juga harus menghilangkan garis miring, jika tidak seluruh baris akan diabaikan.

Menggunakan font-stretch

The font-stretchproperti baru di CSS3 sehingga jika digunakan dalam browser yang lebih tua yang tidak mendukung font-stretchdi fontsteno, akan menyebabkan seluruh baris untuk diabaikan.

Spesifikasi merekomendasikan untuk menyertakan fallback tanpa font-stretch, seperti ini:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Warisan untuk pilihan

Jika Anda menghilangkan salah satu nilai optianal (termasuk line-height), opsional yang dihilangkan tidak akan mewarisi nilai dari elemen induknya, seperti yang sering terjadi pada properti tipografi. Sebagai gantinya, mereka akan disetel ulang ke keadaan awalnya.

Sebagai contoh:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

Dalam hal ini, nilai opsional (miring, huruf kecil, dan tebal) ditempatkan pada fontdeklarasi elemen. Ini juga akan berlaku untuk sebagian besar elemen anak.

Namun, karena kami telah mendeklarasikan ulang fontproperti pada elemen paragraf, semua opsional akan disetel ulang pada paragraf, menyebabkan gaya, varian, bobot, dan tinggi garis kembali ke nilai awalnya.

Kata kunci untuk Mendefinisikan Font Sistem

Selain sintaks di atas, fontproperti juga memungkinkan penggunaan kata kunci sebagai nilai. Mereka:

caption
icon
menu
message-box
small-caption
status-bar

Nilai kata kunci ini menetapkan font ke salah satu yang digunakan pada sistem operasi pengguna untuk kategori tertentu itu. Misalnya, mendefinisikan "caption" akan menyetel font pada elemen tersebut untuk menggunakan font yang sama yang digunakan pada sistem operasi untuk kontrol teks (tombol, drop-down, dll).

Satu kata kunci terdiri dari seluruh nilai:

body ( font: menu; )

Properti lain yang disebutkan sebelumnya tidak valid sehubungan dengan kata kunci ini. Kata kunci ini hanya dapat digunakan dengan fontsingkatan dan tidak dapat dideklarasikan menggunakan salah satu properti longhand individual.