فصل هفتم: استایل‌دهی به متن و فونت‌ها در CSS

(CSS Text & Font Styling)

در این فصل یاد می‌گیریم چطور متن‌های صفحات وب رو جذاب و خوانا کنیم.
ویژگی‌های این فصل برای ریز به ریزِ ظاهر متن به کار می‌روند.

---

۱. تغییر فونت (font-family)

برای تنظیم نوع فونت (مثلاً Tahoma یا Arial) از font-family استفاده می‌کنیم:

body {
  font-family: Tahoma, Arial, sans-serif;
}

• بهتره چند فونت با کاما جدا بذاری تا اگر یکی لود نشد، مرورگر بعدی رو انتخاب کنه.

---

۲. اندازه فونت (font-size)

برای بزرگ یا کوچک کردن متن:

h1 { font-size: 2em; }
p  { font-size: 16px; }

• میشه با px، em، rem، % و … اندازه داد.

---

۳. ضخامت و حالت فونت (font-weight & font-style)

• ضخیم یا نازک کردن:

strong { font-weight: bold; }

• مورب یا ایتالیک:

em { font-style: italic; }

---

۴. استایل‌دهی به رنگ و سایه متن (color, text-shadow)

• تغییر رنگ:

h2 { color: #1976d2; }

• سایه دادن به متن:

.title {
  text-shadow: 2px 2px 4px #bdbdbd;
}

---

۵. تراز و فاصله متن (text-align, line-height)

• تراز:

p.center {
  text-align: center;
}

• فاصله بین خطوط:

p {
  line-height: 1.6;
}

---

۶. دگرگونی حروف (text-transform)

کوچک/بزرگ کردن حروف متن:

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; } /*حروف اول کلمه‌ها بزرگ میشه*/

---

مثال کامل:

<h1 class="title">Welcome to CSS</h1>
<p class="desc">Css makes your website beautiful & readable!</p>

.title {
  font-size: 36px;
  font-family: Verdana, Arial, sans-serif;
  color: #1565c0;
  text-align: center;
  text-shadow: 1px 1px 8px #90caf9;
  font-weight: bold;
}
.desc {
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
  color: #333;
}

---

تمرین

۱. متن مورد علاقه‌ات را در یک h2 و p بنویس.
۲. با ویژگی‌هایی مثل font-family، color، font-size و text-align ظاهرش رو تغییر بده.
۳. ویژگی text-shadow و text-transform رو تست کن و نتیجه رو ببین!

---

نکته سریع:

• برای فارسی‌نویسی بهتره فونت‌های مناسب فارسی استفاده کنی مثل Vazirmatn، IranSans و…
• استفاده از line-height باعث میشه خوانایی متن خیلی بیشتر بشه!