در طراحی وب، انتخاب و تنظیم فونت پیش‌فرض مرورگر یکی از مهم‌ترین مراحل بهینه‌سازی تایپوگرافی است.
مرورگرهای مختلف دارای فونت‌های پیش‌فرض خاصی هستند که ممکن است در سیستم‌های مختلف متفاوت باشند. در CSS، می‌توان از ویژگی font-family و Generic Fonts برای کنترل این موضوع استفاده کرد.
۱. فونت پیش‌فرض مرورگر چیست؟
مرورگرها هنگام بارگذاری یک صفحه وب، اگر فونت مشخصی در CSS تعریف نشده باشد، از فونت پیش‌فرض سیستم عامل استفاده می‌کنند. این فونت بسته به سیستم‌عامل و مرورگر ممکن است متفاوت باشد.
✅ نمونه فونت‌های پیش‌فرض در سیستم‌های مختلف:
| سیستم‌عامل | فونت پیش‌فرض serif | فونت پیش‌فرض sans-serif |
|---|---|---|
| Windows | Times New Roman | Arial |
| macOS | Times | Helvetica |
| Linux | DejaVu Serif | DejaVu Sans |
| Android | Droid Serif | Roboto |
| iOS | Georgia | San Francisco |
۲. تنظیم فونت پیش‌فرض در CSS
برای کنترل فونت پیش‌فرض مرورگر، باید لیستی از فونت‌های جایگزین همراه با یک Generic Font مشخص کنیم.
✅ روش استاندارد تنظیم فونت پیش‌فرض در CSS
body {
font-family: "Helvetica", "Arial", sans-serif;
}
🔹 نتیجه:
- اگر Helvetica در سیستم کاربر موجود باشد، استفاده می‌شود.
- در غیر این صورت، Arial به کار می‌رود.
- اگر هیچ‌کدام از این فونت‌ها موجود نباشند، مرورگر یک فونت sans-serif پیش‌فرض سیستم را انتخاب می‌کند.
✅ همیشه در انتهای لیست یک Generic Font مانند sans-serif یا serif قرار دهید.
۳. Generic Fonts در CSS و نقش آن‌ها در تنظیم فونت پیش‌فرض
در CSS، Generic Fonts به مرورگر می‌گویند که اگر هیچ‌یک از فونت‌های مشخص‌شده در font-family در سیستم کاربر موجود نبودند، یک فونت مشابه از همان خانواده را انتخاب کند.
✅ انواع Generic Fonts در CSS
| Generic Font | توضیح |
|---|---|
serif | فونت‌های دارای زائده (مانند Times New Roman) |
sans-serif | فونت‌های بدون زائده (مانند Arial) |
monospace | فونت‌هایی که تمام کاراکترها عرض یکسان دارند (مانند Courier New) |
cursive | فونت‌های دست‌نویس (مانند Comic Sans MS) |
fantasy | فونت‌های تزئینی و فانتزی |
✅ نمونه تنظیم فونت با Generic Fonts:
body {
font-family: "Times New Roman", serif;
}
🔹 نتیجه: اگر Times New Roman در سیستم کاربر موجود باشد، استفاده می‌شود؛ در غیر این صورت، مرورگر از یک فونت serif پیش‌فرض استفاده می‌کند.
۴. تنظیم فونت پیش‌فرض در عناصر مختلف
ممکن است بخواهید فونت‌های پیش‌فرض را فقط برای بخش‌های خاصی از صفحه تنظیم کنید.
✅ تغییر فونت پیش‌فرض برای سرفصل‌ها و متن اصلی
body {
font-family: "Roboto", sans-serif;
}
h1, h2, h3 {
font-family: "Georgia", serif;
}
🔹 نتیجه:
- متن‌های معمولی با Roboto نمایش داده می‌شوند.
- سرفصل‌ها (
h1تاh3) با فونت Georgia نمایش داده می‌شوند.
۵. استفاده از @font-face برای تنظیم فونت سفارشی
اگر بخواهید یک فونت سفارشی که در سیستم کاربران نصب نیست را نمایش دهید، می‌توانید از @font-face برای بارگذاری آن از سرور استفاده کنید.
✅ افزودن فونت سفارشی با @font-face
@font-face {
font-family: "MyCustomFont";
src: url("MyCustomFont.woff2") format("woff2"),
url("MyCustomFont.woff") format("woff");
}
body {
font-family: "MyCustomFont", sans-serif;
}
🔹 نتیجه:
✅ مرورگر ابتدا فونت MyCustomFont را از سرور بارگیری می‌کند.
✅ اگر فونت در دسترس نباشد، یک فونت sans-serif پیش‌فرض نمایش داده خواهد شد.
✅ توصیه: همیشه نسخه‌های مختلف فونت (WOFF2، WOFF، TTF) را قرار دهید تا در تمامی مرورگرها پشتیبانی شود.
۶. استفاده از Google Fonts برای تنظیم فونت پیش‌فرض
به جای بارگذاری فونت از سرور، می‌توان از 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;
}
✅ مزیت:
- سرعت بالا و بهینه‌شده برای وب
- سازگاری با اکثر مرورگرها
۷. بررسی و تغییر فونت پیش‌فرض مرورگر در تنظیمات مرورگر
اگر بخواهید فونت پیش‌فرض مرورگر را تغییر دهید، می‌توانید از تنظیمات مرورگر استفاده کنید.
🔹 در گوگل کروم:
۱. به تنظیمات (Settings) بروید.
2. به بخش Appearance → Customize fonts بروید.
3. فونت دلخواه خود را برای Standard font و Serif, Sans-serif, Monospace انتخاب کنید.
✅ این تنظیمات فقط روی نمایش فونت‌ها در مرورگر کاربر تأثیر دارد و کدهای CSS شما همچنان اعمال می‌شوند.
📌 نتیجه‌گیری
✅ مرورگرها در صورت نبود فونت مشخص‌شده در CSS، از فونت پیش‌فرض سیستم استفاده می‌کنند.
✅ برای کنترل فونت پیش‌فرض مرورگر، باید لیستی از فونت‌های جایگزین را در font-family همراه با یک Generic Font تنظیم کرد.
✅ برای بارگذاری فونت‌های سفارشی می‌توان از @font-face یا Google Fonts استفاده کرد.
✅ تغییر فونت پیش‌فرض مرورگر از طریق تنظیمات مرورگر فقط روی نمایش محلی تأثیر دارد.
🎨 با استفاده از روش‌های بالا، می‌توانید تایپوگرافی سایت خود را بهینه‌سازی کنید و تجربه کاربری بهتری ایجاد کنید! 🚀
