Cara Mencari Nama Keluarga Font untuk CSS

Nama keluarga font digunakan untuk mengenalpasti jenis huruf dalam fail CSS. Sebanyak banyak jenis huruf mempunyai variasi, jadi pereka biasanya memilih nama keluarga, seperti Arial, Helvetica atau Verdana, bukannya nama spesifik seperti Arial Black atau Verdana Bold. Nama keluarga ialah nama yang dikongsi oleh semua variasi jenis huruf tersebut.

Berikut ialah langkah mudah untuk menentukan nama keluarga font dan menggunakan mereka dalam CSS.

Langkah 1: Cari Nama Keluarga Font

1. Klik butang "Start" pada bar tugas Windows, taip "fonts" dalam bar carian dan tekan "Enter" untuk membuka folder Font. 2. Cari jenis huruf yang anda mahu gunakan dan perhatikan nama keseluruhannya. Contohnya, Arial – satu jenis huruf Windows yang popular – mempunyai banyak variasi tetapi nama keluarga umum ialah "Arial". 3. Gunakan nama keluarga "Arial" untuk mengekalkan jenis huruf generik, atau gunakan nama spesifik seperti "Arial Narrow" jika anda memerlukan varian tertentu. Biasanya, nama keluarga generik dipakai untuk teks badan laman, manakala jenis huruf lebih spesifik dipakai untuk tajuk.

Langkah 2: Tambah Nama Keluarga Generik ke dalam Stack Font

Stack font ialah senarai nama keluarga font dalam CSS yang berfungsi sebagai cadangan sekiranya pelawat tidak mempunyai font utama yang dipasang. Tambahkan nama generik di akhir stack:

• "serif" – untuk stack yang bermula dengan font serif seperti Georgia atau Times New Roman.
• "sans-serif" – untuk stack yang bermula dengan font sans‑serif seperti Helvetica atau Verdana.
• Nama generik lain termasuk "monospace", "cursive" dan "fantasy".

Perlu diingat, nama keluarga generik tidak berguna jika anda menyematkan font dengan @font-face.

Petunjuk Penamaan

Gunakan tanda petik di sekeliling nama keluarga font yang terdiri daripada lebih daripada satu perkataan. Nama font satu perkataan seperti Arial atau Georgia tidak memerlukan petik. Anda boleh menggunakan petik tunggal atau ganda, tetapi elakkan menggabungkan jenis petik kerana ia boleh menyebabkan ralat.

Contoh penulisan CSS:

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Stack ini memberitahu pelayar mencari "Helvetica Neue" terlebih dahulu. Pereka memilihnya kerana ia tidak tersedia pada komputer Windows, yang biasanya memaparkan Helvetica biasa secara tidak rapi. Pengguna Windows akan melihat Arial, manakala pengguna lain akan melihat jenis huruf sans‑serif default mengikut tetapan pelayar.

Tip

• Banyak pereka terkenal seperti Paul Irish dan Chris Coyier kini mengesyorkan untuk tidak menggunakan stack font dan hanya menyebut nama keluarga generik, terutamanya bagi stack biasa seperti Helvetica, Arial dan sans‑serif. Ini menghormati tetapan pengguna dan menjimatkan masa kerana kebanyakan pelayar sudah memilih font tersebut.