آموزش جامع استایل دهی متن و فونت در CSS

🎯 اهداف یادگیری

• آشنایی با ویژگی‌های متن در CSS
• یادگیری نحوه تغییر فونت و سایز متن
• کنترل فاصله خطوط و تراز متن
• استفاده از فونت‌های سفارشی در وب
• تکنیک‌های پیشرفته تایپوگرافی

📌 ویژگی‌های پایه متن در CSS

CSS امکانات گسترده‌ای برای کنترل ظاهر متن ارائه می‌دهد:

p {
  color: #333;
  font-family: "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: right;
}

ویژگی‌های اصلی متن:

• font-family: تعیین خانواده فونت (مثال: Arial, Tahoma)
• font-size: تعیین اندازه فونت (پیکسل، em، rem، درصد)
• font-weight: تعیین ضخامت فونت (normal, bold, 100-900)
• color: تعیین رنگ متن (نام رنگ، hex، rgb، rgba)

📌 کنترل فونت و تایپوگرافی

h1 {
  font: italic small-caps bold 24px/1.2 "Segoe UI", Roboto, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

ویژگی‌های پیشرفته:

• font: ترکیب چند ویژگی فونت در یک خط
• letter-spacing: فاصله بین حروف
• word-spacing: فاصله بین کلمات
• text-decoration: خط زیر متن (underline, overline, line-through)
• text-shadow: سایه برای متن

📌 استفاده از فونت‌های سفارشی

برای استفاده از فونت‌های غیر استاندارد می‌توانید از @font-face استفاده کنید:

@font-face {
  font-family: "IranSans";
  src: url("fonts/IRANSansWeb.woff2") format("woff2"),
       url("fonts/IRANSansWeb.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "IranSans", sans-serif;
}

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

• فرمت‌های فونت: WOFF2 (ترجیحاً), WOFF, TTF, EOT
• font-display: تعیین رفتار نمایش فونت (swap, block, fallback)
• فونت‌های فارسی: استفاده از فونت‌های بهینه‌شده برای وب مانند ایران‌سنس
• وزن‌های مختلف: تعریف @font-face جداگانه برای هر وزن (نازک، معمولی، پررنگ)

📌 تایپوگرافی واکنش‌گرا (Responsive Typography)

برای نمایش مناسب متن در دستگاه‌های مختلف:

/* پایه برای موبایل */
html {
  font-size: 14px;
}
/* تبلت */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
/* دسکتاپ */
@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

استراتژی‌های تایپوگرافی واکنش‌گرا:

• واحدهای نسبی: استفاده از em و rem به جای px
• محاسبه سایز فونت: استفاده از calc() برای محاسبات پویا
• نقاط شکست: تعریف font-size متفاوت در اندازه‌های مختلف صفحه
• فاصله خطوط: تنظیم line-height بر اساس viewport (vw, vh)

📌 تفاوت واحدهای اندازه‌گیری متن

📌 تمرین عملی

استایل‌های زیر را برای یک پاراگراف نمونه پیاده‌سازی کنید:

.special-text {
  /* ویژگی‌های مورد نیاز */
}

مشخصات تمرین:

1. استفاده از فونت ایران‌سنس با fallback به sans-serif
2. سایز فونت 1.2rem با line-height برابر 1.8
3. رنگ متن #444 با سایه متن ملایم
4. تراز متن justify و فاصله بین خطوط 1.5em
5. حاشیه‌های مناسب و padding کافی

📌 تکنیک‌های پیشرفته تایپوگرافی

برخی تکنیک‌های حرفه‌ای برای طراحی متن:

۱. متن چندستونی

.multi-column {
  column-count: 3;
  column-gap: 2em;
  column-rule: 1px solid #ddd;
}

۲. جلوه‌های متن

.fancy-text {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

۳. کنترل overflow متن

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

📌 قدم بعدی

در درس بعدی با رنگ‌ها و پس‌زمینه در CSS آشنا خواهیم شد!