Fon-keluarga - Trik CSS

Anonim

The font-familyharta mentakrifkan fon yang digunakan untuk elemen yang dipilih. Fon yang dipilih bukan satu muka font, tetapi "keluarga", dan oleh itu mungkin bergantung pada nilai harta tipografi lain untuk memilih wajah yang betul dalam keluarga.

body ( font-family: Arial, Helvetica, sans-serif; )

Nilai boleh menjadi salah satu daripada yang berikut:

  • Nama keluarga fon yang sepadan dengan font yang tertanam di halaman atau tersedia di sistem pengguna.
  • Serangkaian nama keluarga, dipisahkan dengan koma, yang boleh merangkumi nama keluarga generik

Sekiranya banyak nama keluarga digunakan, penyemak imbas akan memilih yang pertama yang dijumpai sama ada tertanam di halaman menggunakan @font-faceatau dipasang pada sistem operasi pengguna.

Kerana font-familytidak ada nilai lalai atau awal tertentu; nilai awal selalu bergantung pada penyemak imbas dan / atau sistem operasi.

Nama Keluarga Generik

Sekiranya banyak nilai digunakan untuk satu deklarasi, disarankan agar keluarga generik disenaraikan terakhir sebagai cadangan untuk memastikan pengalaman tipografi terbaik:

code ( font-family: Courier, Monaco, monospace; )

Dalam contoh di atas, "Courier" dan "Monaco" adalah nama keluarga font sebenar, sedangkan "monospace" hanyalah rujukan umum untuk fon yang dipasang pada sistem pengguna yang monospace.

Sekiranya kedua-dua yang pertama tidak dipasang, penyemak imbas akan memilih pilihan terbaik, tetapi hanya dari fon monospace. Tanpa keluarga generik, fon akan menjadi default pada fon default pada sistem pengguna (kemungkinan serif atau sans-serif), yang tidak diingini.

Nama keluarga generik termasuk serif, sans-serif, cursive, fantasy, dan monospace.

Sekiranya nama keluarga sepadan dengan nama keluarga generik, nama keluarga harus disebut untuk menunjukkan bahawa nama keluarga tersebut tidak generik.

Nama Keluarga Pelbagai Kata

Sekiranya nama keluarga mengandungi beberapa perkataan, dipisahkan dengan spasi, disarankan untuk menyenaraikan nama keluarga dalam tanda petik (tunggal atau berganda):

code ( font-family: "Times New Roman", Georgia, serif; )

Ini tidak selalu diperlukan, tetapi pada amnya lebih selamat untuk memasukkan petikan untuk nama keluarga yang mempunyai ruang atau watak khas.

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi