Font

تعریف

ویژگی‌های فونت در CSS برای انتخاب نوع فونت، اندازه، ضخامت، حالت و استایل نوشتار استفاده می‌شن.

🔑 خصوصیات مهم فونت

1) font-family

انتخاب نوع فونت.

p { font-family: "Times New Roman", Arial, sans-serif; }

🔹 بهتره چند فونت پشت سر هم بدی تا اگه یکی روی سیستم نبود، از بعدی استفاده کنه.

2) font-size

تعیین اندازه فونت.

p { font-size: 18px; /* px, em, rem, %, larger, smaller */ }

3) font-weight

تعیین ضخامت فونت.

h1 { font-weight: bold; /* normal, lighter, 100-900 */ }

4) font-style

برای حالت فونت (کج یا عادی).

em { font-style: italic; /* normal, oblique */ }

5) font-variant

نمایش حروف کوچک به صورت کپیتال کوچک (small-caps).

p { font-variant: small-caps; }

6) line-height (ارتباط با فونت)

ارتفاع خط متن (فاصله عمودی بین خطوط).

p { line-height: 1.6; }

7) font shorthand

می‌تونیم همه‌ی ویژگی‌ها رو یکجا بنویسیم:

p { font: italic small-caps bold 18px/1.6 Arial, sans-serif; }

🎨 استفاده از فونت‌های خارجی (Google Fonts)

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

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
body { font-family: "Roboto", sans-serif; }

⚡ نکات مهم

  • برای فارسی بهتره فونت‌های فارسی مثل Vazir، Shabnam یا IRANSans استفاده بشن.

  • همیشه یک فونت fallback (مثل sans-serif) قرار بده.

  • واحدهای em و rem برای فونت بهتر از px هستن چون واکنش‌گرا می‌شن.