در CSS برای اینکه بتوانیم فونتهای مناسبی را برای متن‌های وب سایت‌هایمان انتخاب کنیم، از ویژگی font-family استفاده می‌کنیم. اما همیشه همه‌ی فونت‌ها روی سیستم کاربران نصب نیست و بنابراین بهترین روش استفاده از generic-familyهاست که تضمین می‌کند فونت مناسبی روی مرورگر کاربر نمایش داده شود. دسته‌های generic-family شامل serif, sans-serif, monospace, cursive و fantasy هستند، هر کدام از این دسته‌ها ویژگی‌های خاص خود را دارند و می‌توانند تاثیرات مختلفی روی ظاهر و خوانایی متن بگذارند.
وقتی که font-family را در CSS تعریف می‌کنید، معمولاً نام چندین فونت مختلف و در نهایت یک نوع generic-family آورده می‌شود. هدف از این کار این است که اگر اولین فونت‌ها روی سیستم کاربر موجود نبودند، مرورگر به سراغ گزینه بعدی برود و در نهایت از نوع generic-family استفاده کند.
let's see an example:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
دستور بالا به مرورگر می‌گوید که سعی کند متن را ابتدا با فونت ‘Segoe UI’ نمایش دهد. اگر این فونت روی سیستم وجود نداشت به ترتیب از فونتهای Tahoma، Geneva، و Verdana استفاده کند و اگر هیچ‌کدام از این فونت‌ها حاضر نبودند، از دسته‌ی sans-serif که یک دسته‌بندی عمومی‌تر است استفاده کند.
با استفاده از generic-familyها، تضمین می‌شود که وب‌سایت شما حتی در شرایطی که فونتهای اصلی موجود نیستند هم خوانایی مناسبی داشته باشد.
توضیح کد خط به خط
body | نام عنصر HTML مورد نظرfont-family | ویژگی CSS برای تنظیم نوع فونت'Segoe UI' | اولین انتخاب از سری فونت‌ها در صورت موجود بودنTahoma, Geneva, Verdana | گزینه‌های پشتیبان در صورت عدم موجودیت فونتهای پیشینsans-serif | generic-family برای استفاده در نبود کلیه‌ی گزینه‌ها