سیاساس/فونت
| گرادیان | فونت | اندازه متن |
| سیاساس |
فونتها در CSS
[ویرایش]انتخاب فونت مناسب برای وبسایت، نقش بسیار مهمی در تجربه کاربری ایفا میکند. فونت خوب باعث خوانایی بهتر متن، انتقال حس برند، و ایجاد جلوهی بصری جذاب میشود.
اهمیت انتخاب فونت
[ویرایش]- انتخاب فونت تأثیر مستقیمی بر حس و حال بازدیدکننده دارد.
- فونت میتواند هویت برند را تقویت کند یا برعکس، آن را تضعیف کند.
- فونتی که خوانا نباشد، باعث خستگی چشم و بیعلاقگی کاربر خواهد شد.
- انتخاب درست فونت شامل در نظر گرفتن موارد زیر است:
- اندازه فونت
- رنگ فونت
- فاصلهی بین حروف و خطوط (letter-spacing / line-height)
- سازگاری فونت در مرورگرها و دستگاههای مختلف
خانوادههای عمومی فونت (Generic Font Families)
[ویرایش]در CSS، پنج نوع خانوادهی کلی برای فونتها وجود دارد. هر فونت خاص معمولاً در یکی از این خانوادهها قرار میگیرد:
| خانواده عمومی | توضیحات | نمونه فونتها |
|---|---|---|
| Serif | حروف با خطوط کوچک در انتها (زائدهدار). رسمی و سنتی بهنظر میرسند. | Times New Roman, Georgia, Garamond |
| Sans-serif | بدون زائده، ساده و مدرن. معمولاً در صفحهنمایش خواناترند. | Arial, Helvetica, Verdana |
| Monospace | تمام حروف عرض یکسان دارند. برای کد نویسی یا متنهای فنی مناسباند. | Courier New, Lucida Console, Monaco |
| Cursive | شبیه دستخط انسان هستند. حالت دوستانه یا هنری دارند. | Brush Script MT, Lucida Handwriting |
| Fantasy | فونتهای تزئینی و فانتزی. برای طراحیهای خاص و غیررسمی مناسباند. | Papyrus, Copperplate |
توجه: فونتهای sans-serif معمولاً روی صفحهنمایش راحتتر خوانده میشوند تا serif.
ویژگی font-family در CSS
[ویرایش]در CSS از ویژگی font-family برای تعیین نوع فونت استفاده میشود.
نکات مهم:
- اگر نام فونت بیش از یک کلمه باشد، باید درون کوتیشن (نقل قول) قرار گیرد.
مثال: "Times New Roman"
- بهتر است چند فونت به عنوان فونت جایگزین (fallback) تعریف کنید، از فونت دلخواه شروع کنید و با یک خانواده عمومی به پایان برسانید.
- مرورگرها بهترتیب فونتها را بررسی میکنند و اگر اولی موجود نباشد، به سراغ بعدی میروند.
مثالهایی از font-family در CSS
[ویرایش].p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
فونتهای امن برای وب (Web-Safe Fonts)
[ویرایش]فونتهای امن برای وب (Web-Safe Fonts) فونتهایی هستند که بهصورت پیشفرض روی اکثر سیستمعاملها (مانند Windows، macOS، Linux، iOS، Android) نصب شدهاند. استفاده از این فونتها باعث میشود متن وبسایت شما تقریباً در همه دستگاهها بهدرستی نمایش داده شود، بدون نیاز به بارگذاری فونت خارجی.
مزایای فونتهای امن:
[ویرایش]- سازگاری بالا در مرورگرهای مختلف
- عملکرد سریعتر (عدم نیاز به بارگذاری فونت از سرور)
- تضمین نمایش صحیح متن در شرایط مختلف
نمونههایی از فونتهای امن بر اساس خانواده:
[ویرایش]| خانواده عمومی | فونتهای امن رایج |
|---|---|
| serif | Times New Roman، Georgia، Garamond |
| sans-serif | Arial، Helvetica، Verdana، Tahoma |
| monospace | Courier New، Lucida Console، Consolas |
| cursive | Comic Sans MS، Brush Script MT |
| fantasy | Impact، Copperplate |
نکته: هنگام استفاده از فونتهای وب (مانند Google Fonts)، همیشه یک فونت امن را به عنوان پشتیبان در `font-family` تعریف کنید.
فونت جایگزین (Font Fallback) در CSS
[ویرایش]در CSS، اگر مرورگر نتواند فونت اول را بارگذاری کند، بهصورت خودکار سراغ فونت بعدی میرود. این فرآیند را fallback یا سیستم «فونت جایگزین» مینامند.
ساختار توصیهشده
[ویرایش]همیشه از خاصترین فونت شروع کرده و به یک خانواده عمومی ختم کنید.
body {
font-family: "Roboto", "Segoe UI", Arial, sans-serif;
}
در این مثال:
- ابتدا تلاش میشود از فونت «Roboto» استفاده شود.
- اگر موجود نبود، فونت «Segoe UI» امتحان میشود.
- سپس «Arial» بررسی میشود.
- در نهایت، اگر هیچکدام در دسترس نبودند، مرورگر یک فونت sans-serif پیشفرض را انتخاب میکند.
اصول طراحی fallback خوب:
[ویرایش]- حداقل دو فونت جایگزین تعریف کنید.
- همیشه با یک خانواده عمومی پایان دهید (مثل: `sans-serif` یا `serif`).
- از فونتهایی استفاده کنید که از نظر سبک، وزن، و فاصله مشابه باشند.
- از ابزارهایی مانند CSS Font Stack برای انتخاب ترکیبهای مناسب استفاده کنید.
مثال دیگر: فونت مونو برای کد
[ویرایش]code {
font-family: "Fira Code", "Courier New", monospace;
}
هدف از fallback این است که متن در همه شرایط خوانا و مرتب باقی بماند، حتی اگر فونت اصلی در دسترس نباشد.