انتخاب فونت مناسب در طراحی وب تأثیر زیادی بر خوانایی متن و تجربه کاربری دارد. در CSS، می‌توان از ویژگی font-family برای تعیین فونت‌های خاص و از Generic Fonts برای تنظیم دسته‌بندی کلی فونت‌ها استفاده کرد.
این مقاله به شما کمک می‌کند تا درک کاملی از Font Family و Generic Fonts در CSS داشته باشید و به بهترین شکل از آن‌ها استفاده کنید.
۱. مفهوم font-family در CSS
ویژگی font-family در CSS برای تعیین فونت مورد استفاده در متن‌ها به کار می‌رود. این ویژگی امکان استفاده از چندین فونت جایگزین را فراهم می‌کند تا در صورتی که مرورگر نتواند فونت اول را نمایش دهد، از فونت‌های بعدی استفاده کند.
✅ نحوه تعریف font-family
p {
font-family: "Arial", "Helvetica", sans-serif;
}
🔹 نتیجه:
- مرورگر ابتدا تلاش می‌کند فونت Arial را نمایش دهد.
- اگر Arial موجود نباشد، فونت Helvetica نمایش داده می‌شود.
- اگر هیچ‌کدام موجود نباشند، یک فونت sans-serif پیش‌فرض سیستم استفاده می‌شود.
✅ نکته مهم: همیشه در انتهای لیست، یک Generic Font قرار دهید تا در صورت عدم دسترسی به فونت‌های مشخص‌شده، یک فونت مشابه جایگزین شود.
۲. Generic Fonts در CSS چیست؟
Generic Fonts در CSS دسته‌ای از فونت‌های عمومی هستند که به مرورگر اجازه می‌دهند فونتی مشابه را بر اساس سیستم کاربر انتخاب کند. این فونت‌ها استاندارد هستند و در تمامی مرورگرها پشتیبانی می‌شوند.
✅ انواع Generic Fonts در CSS
| Generic Font | توضیح |
|---|---|
serif | فونت‌های دارای زائده (مانند Times New Roman) |
sans-serif | فونت‌های بدون زائده (مانند Arial) |
monospace | فونت‌هایی که تمام حروف عرض یکسان دارند (مانند Courier New) |
cursive | فونت‌های دست‌نویس (مانند Comic Sans MS) |
fantasy | فونت‌های فانتزی و تزئینی |
✅ نمونه استفاده از Generic Fonts در CSS:
body {
font-family: "Georgia", serif;
}
🔹 نتیجه: اگر Georgia در سیستم موجود باشد، استفاده می‌شود؛ در غیر این صورت، یک فونت serif پیش‌فرض نمایش داده خواهد شد.
۳. ترکیب font-family با Generic Fonts
همیشه لیستی از فونت‌های جایگزین را همراه با یک Generic Font مشخص کنید تا سازگاری بیشتری در مرورگرهای مختلف داشته باشید.
h1 {
font-family: "Roboto", "Arial", sans-serif;
}
🔹 مزیت:
✅ اگر Roboto در سیستم کاربر موجود باشد، استفاده می‌شود.
✅ اگر موجود نباشد، Arial جایگزین می‌شود.
✅ اگر هیچ‌کدام نبودند، یک فونت sans-serif پیش‌فرض سیستم نمایش داده خواهد شد.
۴. استفاده از فونت‌های سفارشی با @font-face
اگر بخواهید از یک فونت سفارشی که در سیستم کاربران نصب نیست استفاده کنید، می‌توانید از @font-face استفاده کنید.
✅ نحوه بارگذاری یک فونت سفارشی از سرور
@font-face {
font-family: "CustomFont";
src: url("CustomFont.woff2") format("woff2"),
url("CustomFont.woff") format("woff");
}
p {
font-family: "CustomFont", sans-serif;
}
🔹 نتیجه: مرورگر ابتدا فونت “CustomFont” را از سرور بارگیری می‌کند. اگر فونت لود نشود، یک فونت sans-serif پیش‌فرض جایگزین خواهد شد.
✅ توصیه: همیشه نسخه‌های مختلف فونت (WOFF2، WOFF، TTF) را قرار دهید تا در تمامی مرورگرها قابل استفاده باشد.
۵. استفاده از فونت‌های گوگل در CSS
بهترین روش برای استفاده از فونت‌های سفارشی سبک و سریع، استفاده از Google Fonts است.
✅ نحوه افزودن فونت گوگل در CSS
🔹 ۱. افزودن لینک در <head> سایت:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
🔹 ۲. استفاده از فونت در CSS:
body {
font-family: "Roboto", sans-serif;
}
✅ مزیت:
- سرعت بالا و بهینه‌سازی‌شده برای وب
- سازگاری با اکثر مرورگرها
۶. تنظیم استایل‌های فونت در CSS
علاوه بر font-family، می‌توان استایل‌های مختلفی را روی فونت‌ها اعمال کرد.
✅ اندازه فونت (font-size)
p {
font-size: 16px;
}
🔹 مقادیر قابل استفاده:
px→ اندازه ثابتem→ اندازه نسبی به والدrem→ اندازه نسبی به ریشه سند
✅ وزن فونت (font-weight)
h1 {
font-weight: bold;
}
🔹 مقادیر قابل استفاده:
normal→ مقدار پیش‌فرضbold→ ضخیم100تا900→ وزن دقیق فونت
✅ سبک فونت (font-style)
p {
font-style: italic;
}
🔹 مقادیر:
normal→ معمولیitalic→ ایتالیکoblique→ مایل
📌 نتیجه‌گیری
✅ font-family برای تعیین فونت‌های خاص و جایگزین‌ها در CSS استفاده می‌شود.
✅ Generic Fonts امکان انتخاب دسته‌بندی کلی فونت‌ها را در صورت عدم پشتیبانی از فونت‌های سفارشی فراهم می‌کند.
✅ استفاده از @font-face یا Google Fonts به شما امکان می‌دهد فونت‌های سفارشی را در وب‌سایت خود استفاده کنید.
✅ استایل‌های مختلف مانند font-size، font-weight و font-style به شما کمک می‌کنند تا متن را به‌درستی قالب‌بندی کنید.
🎨 با انتخاب فونت مناسب، خوانایی و طراحی وب‌سایت خود را به سطح بالاتری ببرید! 🚀
