شهره CSS

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

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

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

فونت مناسب می‌تواند تصویر قوی برند شما را ایجاد کند.

استفاده از فونت‌های قابل خواندن بسیار مهم است. فونت به متن شما ارزش می‌افزاید. انتخاب رنگ و اندازه مناسب برای فونت نیز بسیار مهم است.

خانواده‌های عمومی فونت

در CSS، پنج خانواده عمومی فونت وجود دارد:

  • فونت‌های خطی (Serif) - در لبه هر حرف یک نقطه کوچک وجود دارد. آنها یک احساس فرم و زیبایی ایجاد می‌کنند.
  • فونت‌های بدون خط (Sans-serif) - خطوط فونت ساده هستند (بدون خطوط کوچک). آنها یک ظاهر مدرن و ساده ایجاد می‌کنند.
  • فونت‌های فضایی (Monospace) - در اینجا همه حروف دارای عرض ثابت هستند. آنها یک ظاهر مکانیکی ایجاد می‌کنند.
  • فونت‌های خطی (Cursive) - نمونه‌ای از خطوط انسانی هستند.
  • فونت‌های خیالی (Fantasy) - فونت‌های تزئینی/بامزه هستند.

تمام نام‌های فونت‌های مختلف به یکی از پنج خانواده عمومی فونت تعلق دارند.

تفاوت بین فونت‌های Serif و Sans-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 برای تعیین فونت متن استفاده می‌کنیم.

ویژگی font-family باید چندین نام فونت به عنوان "نظام پشتیبان" شامل شود تا سازگاری بیشتری بین مرورگر و سیستم عامل را تضمین کند. لطفاً از فونت مورد نیاز خود شروع کنید و با خانواده‌های عمومی پایان دهید (اگر فونت دیگری در دسترس نباشد، مرورگر از فونت‌های مشابه خانواده عمومی انتخاب می‌کند). نام‌های فونت باید با کاما جدا شوند.

نکته:اگر نام فونت شامل چند کلمه باشد، باید در قید‌ها نوشته شود، به عنوان مثال: "Times New Roman".

مثال

تعیین فونت‌های مختلف برای سه پاراگراف:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

آزمایش کنید