انتخاب فونت مناسب برای وب‌سایت شما بسیار مهم است!
اهمیت انتخاب فونت
انتخاب فونت مناسب تأثیر زیادی بر تجربه کاربران از یک وب‌سایت دارد. فونت درست می‌تواند هویت قوی برای برند شما ایجاد کند. همچنین انتخاب فونتی که خواندن آن آسان باشد اهمیت دارد، زیرا فونت به متن شما ارزش افزوده می‌دهد. انتخاب رنگ و اندازه مناسب برای فونت نیز اهمیت زیادی دارد.
خانواده‌های عمومی فونت (Generic Font Families)
در CSS، پنج خانواده عمومی فونت وجود دارد:
- Serif: این فونت‌ها در لبه‌های هر حرف ضربه‌های کوچکی دارند و حس رسمیت و ظرافت را ایجاد می‌کنند.
- Sans-serif: این فونت‌ها خطوط تمیز و بدون ضربه‌های کوچک دارند و ظاهری مدرن و مینیمالیستی ایجاد می‌کنند.
- Monospace: در این فونت‌ها همه حروف پهنای ثابتی دارند و ظاهری مکانیکی ایجاد می‌کنند.
- Cursive: این فونت‌ها تقلیدی از دست‌خط انسان هستند.
- Fantasy: این فونت‌ها دکوراتیو و بازیگوشانه هستند.
همه نام‌های مختلف فونت به یکی از این خانواده‌های عمومی تعلق دارند.
تفاوت بین فونت‌های Serif و Sans-serif
Serif vs. Sans-serif
نکته: در نمایشگرهای کامپیوتر، فونت‌های sans-serif معمولاً خواناتر از فونت‌های serif هستند.
مثال‌هایی از فونت‌ها
| خانواده عمومی فونت | مثال‌هایی از نام‌های فونت |
|---|---|
| Serif | Times New Roman, Georgia, Garamond |
| Sans-serif | Arial, Verdana, Helvetica |
| Monospace | Courier New, Lucida Console, Monaco |
| Cursive | Brush Script MT, Lucida Handwriting |
| Fantasy | Copperplate, Papyrus |
ویژگی font-family در CSS
در CSS از ویژگی font-family برای مشخص کردن فونت متن استفاده می‌کنیم.
نکته: اگر نام فونت بیش از یک کلمه باشد، باید آن را در نقل قول قرار دهید، مانند: "Times New Roman".
نکته: ویژگی font-family باید شامل چندین نام فونت به عنوان یک سیستم پشتیبان (fallback) باشد تا حداکثر سازگاری بین مرورگرها و سیستم‌عامل‌ها تضمین شود. از فونت مورد نظر خود شروع کنید و با یک خانواده عمومی پایان دهید تا مرورگر در صورت عدم وجود فونت‌های دیگر، یک فونت مشابه از خانواده عمومی را انتخاب کند. نام‌های فونت باید با کاما از هم جدا شوند.
مثال:
مشخص کردن چند فونت مختلف برای سه پاراگراف:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام