متن و فونت‌ها
استایل‌دهی متن و کار با فونت‌ها در CSS
فهرست مطالب
آنچه در این درس خواهید آموخت
دنیای زیبای تایپوگرافی
متن، قلب هر وب‌سایت است!
تصور کنید وب‌سایتی بدون متن زیبا! مثل کتابی که با خط بد نوشته شده باشد. CSS به ما امکان می‌دهد متن‌هایمان را زیبا، خوانا و جذاب کنیم! ✨
فونت‌ها و استایل‌های متن می‌توانند احساسات مختلفی را منتقل کنند. یک فونت رسمی برای کسب‌وکار، یک فونت بازیگوش برای کودکان!
حقیقت جالب:
اولین فونت وب در سال ۱۹۹۵ معرفی شد و تنها شامل فونت‌های سیستمی بود. امروزه هزاران فونت وب در دسترس هستند!
خصوصیات فونت
فونت‌ها شخصیت متن شما را تعین می‌کنند. مثل لباس برای کلمات! هر فونت حس و حال خاصی دارد. 👔
خانواده فونت (font-family)
/* فونت‌های سیستمی */
p {
font-family: Arial, sans-serif;
}
/* فونت‌های فارسی */
.persian-text {
font-family: 'Vazir', 'Tahoma', sans-serif;
}
/* فونت‌های مونوسپیس برای کد */
code {
font-family: 'Courier New', monospace;
}
/* فونت‌های سریف */
.elegant {
font-family: 'Times New Roman', serif;
}نمایش در مرورگر:
این متن با فونت Arial نمایش داده می‌شود
این متن با فونت Times New Roman نمایش داده می‌شود
این متن با فونت Courier New نمایش داده می‌شود
این متن با فونت Tahoma نمایش داده می‌شود
اندازه فونت (font-size)
/* اندازه با پیکسل */
.small { font-size: 12px; }
.medium { font-size: 16px; }
.large { font-size: 24px; }
/* اندازه نسبی */
.relative { font-size: 1.2em; }
.responsive { font-size: 2rem; }
/* اندازه درصدی */
.percentage { font-size: 120%; }نمایش در مرورگر:
متن کوچک (12px)
متن متوسط (16px)
متن بزرگ (24px)
متن نسبی (1.5em)
نکته مهم:
همیشه فونت‌های پشتیبان (fallback) تعریف کنید تا اگر فونت اصلی بارگذاری نشد، فونت جایگزین نمایش داده شود!
استایل‌دهی متن
استایل‌های متن روح کلمات شما هستند! آن‌ها باعث می‌شوند متن شما احساسات مختلفی منتقل کند. مثل بازیگری برای کلمات! 🎭
وزن فونت (font-weight)
/* وزن‌های مختلف */
.light { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }
.extra-bold { font-weight: 900; }
/* کلمات کلیدی */
.thin { font-weight: lighter; }
.thick { font-weight: bolder; }نمایش در مرورگر:
متن نازک (300)
متن عادی (400)
متن متوسط (500)
متن ضخیم (700)
متن خیلی ضخیم (900)
حالت فونت (font-style) و تزئین متن
/* حالت فونت */
.italic { font-style: italic; }
.oblique { font-style: oblique; }
.normal { font-style: normal; }
/* تزئین متن */
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.no-decoration { text-decoration: none; }
/* ترکیب تزئینات */
.fancy {
text-decoration: underline overline;
text-decoration-color: red;
text-decoration-style: wavy;
}نمایش در مرورگر:
متن کج (italic)
متن زیرخط‌دار
متن روخط‌دار
متن خط‌خورده
متن با زیرخط قرمز
نکته طلایی:
از تزئینات متن با احتیاط استفاده کنید! زیرخط معمولاً برای لینک‌ها استفاده می‌شود و ممکن است کاربران را گیج کند.
تراز متن و فاصله خطوط
برای کنترل چیدمان متن و فاصله بین خطوط، از ویژگی‌های text-align و line-height استفاده می‌کنیم. 📐
تراز متن (Text Alignment)
/* تراز چپ */
.left-align {
text-align: left;
}
/* تراز راست */
.right-align {
text-align: right;
}
/* تراز وسط */
.center-align {
text-align: center;
}
/* تراز دو طرفه */
.justify-align {
text-align: justify;
}نمایش در مرورگر:
متن تراز چپ - این متن در سمت چپ قرار گرفته است
متن تراز راست - این متن در سمت راست قرار گرفته است
متن تراز وسط - این متن در وسط قرار گرفته است
متن تراز دو طرفه - این متن در هر دو طرف تراز شده و فاصله‌ها به طور یکنواخت توزیع شده‌اند تا خطوط کاملاً صاف باشند.
فاصله خطوط (Line Height)
/* فاصله کم */
.tight-spacing {
line-height: 1.2;
}
/* فاصله معمولی */
.normal-spacing {
line-height: 1.5;
}
/* فاصله زیاد */
.loose-spacing {
line-height: 2;
}
/* فاصله با پیکسل */
.pixel-spacing {
line-height: 24px;
}نمایش در مرورگر:
فاصله کم (1.2):
این متن با فاصله کم نوشته شده است.
خطوط به هم نزدیک‌تر هستند.
فاصله معمولی (1.5):
این متن با فاصله معمولی نوشته شده است.
خوانایی مناسبی دارد.
فاصله زیاد (2):
این متن با فاصله زیاد نوشته شده است.
خطوط از هم فاصله دارند.
نکته مهم:
فاصله خطوط 1.5 تا 1.6 برای خوانایی بهتر متن‌های فارسی توصیه می‌شود. از فاصله‌های خیلی کم یا زیاد اجتناب کنید.
تمرین عملی
حالا وقت ساختن یک صفحه زیبا با استایل‌های متنی است!
📝 تمرین:
یک صفحه مقاله بسازید که شامل موارد زیر باشد:
- • عنوان اصلی با فونت Vazirmatn و اندازه 32px
- • زیرعنوان با فونت کج و رنگ خاکستری
- • پاراگراف اول با تراز دو طرفه و فاصله خطوط 1.6
- • پاراگراف دوم با تراز وسط
- • متن مهم با font-weight: bold
- • متن تاکیدی با text-decoration: underline
- • نقل قول با فونت monospace
- • فوتر با متن کوچک و تراز وسط
جواب تمرین
این یکی از راه‌های حل این تمرین است:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مقاله نمونه</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
<h1 class="main-title">هنر برنامه‌نویسی</h1>
<h2 class="subtitle">راهی به سوی خلاقیت دیجیتال</h2>
<p class="justified-text">
برنامه‌نویسی یکی از مهارت‌های کلیدی قرن بیست و یکم محسوب می‌شود.
این هنر نه تنها ابزاری برای حل مسائل پیچیده است، بلکه راهی برای
بیان خلاقیت و نوآوری در دنیای دیجیتال به شمار می‌آید. هر خط کدی
که می‌نویسیم، قدمی به سوی ساختن آینده‌ای بهتر است.
</p>
<p class="centered-text">
<strong class="important-text">یادگیری برنامه‌نویسی</strong> نیازمند
<span class="emphasized-text">صبر و تمرین مداوم</span> است.
</p>
<blockquote class="quote">
"کد بنویس، اشتباه کن، یاد بگیر، تکرار کن."
</blockquote>
<footer class="article-footer">
نوشته شده در تاریخ ۱۵ دی ۱۴۰۴
</footer>
</article>
</body>
</html>/* تنظیمات کلی */
body {
font-family: 'Vazirmatn', Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
/* عنوان اصلی */
.main-title {
font-family: 'Vazirmatn', sans-serif;
font-size: 32px;
font-weight: bold;
text-align: center;
color: #2c3e50;
margin-bottom: 10px;
}
/* زیرعنوان */
.subtitle {
font-style: italic;
color: #7f8c8d;
text-align: center;
font-size: 18px;
margin-bottom: 30px;
}
/* پاراگراف با تراز دو طرفه */
.justified-text {
text-align: justify;
line-height: 1.6;
margin-bottom: 20px;
font-size: 16px;
}
/* پاراگراف با تراز وسط */
.centered-text {
text-align: center;
margin-bottom: 25px;
font-size: 16px;
}
/* متن مهم */
.important-text {
font-weight: bold;
color: #e74c3c;
}
/* متن تاکیدی */
.emphasized-text {
text-decoration: underline;
color: #3498db;
}
/* نقل قول */
.quote {
font-family: 'Courier New', monospace;
background-color: #ecf0f1;
padding: 15px;
border-left: 4px solid #3498db;
margin: 20px 0;
font-style: italic;
text-align: center;
}
/* فوتر */
.article-footer {
font-size: 12px;
text-align: center;
color: #95a5a6;
margin-top: 30px;
border-top: 1px solid #bdc3c7;
padding-top: 15px;
}نکته:
توجه کنید که برای لینک‌های خارجی از target="_blank" استفاده شده و برای هر تصویر alt مناسب نوشته شده است. همچنین آیکون‌های کوچک کنار متن‌ها تجربه کاربری بهتری ایجاد می‌کنند.