CSS – خانواده فونت (Font Family)

انتخاب فونت مناسب برای وب‌سایت شما بسیار مهم است!

اهمیت انتخاب فونت

انتخاب فونت مناسب تأثیر زیادی بر تجربه کاربران از یک وب‌سایت دارد. فونت درست می‌تواند هویت قوی برای برند شما ایجاد کند. همچنین انتخاب فونتی که خواندن آن آسان باشد اهمیت دارد، زیرا فونت به متن شما ارزش افزوده می‌دهد. انتخاب رنگ و اندازه مناسب برای فونت نیز اهمیت زیادی دارد.

خانواده‌های عمومی فونت (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;
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.