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;
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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