درس سوم: تایپوگرافی و مدیریت فونتها در CSS
درس سوم: تایپوگرافی و مدیریت فونتها در CSS
زیبایی یک سایت تا حد زیادی به انتخاب فونت و نحوه نمایش متنها بستگی دارد. در این درس یاد میگیریم چطور نوع، اندازه، ضخامت و فواصل متن را در CSLearn کنترل کنیم.
🖋️ ۱. انتخاب خانواده فونت (Font Family)
با ویژگی font-family مشخص میکنیم که متن با چه فونتی نمایش داده شود. همیشه بهتر است چند فونت جایگزین هم بنویسیم:
p {
font-family: "Tahoma", "Arial", sans-serif;
}* اگر مرورگر فونت اول را نداشته باشد، به سراغ دومی و سومی میرود.
📏 ۲. اندازه و ضخامت متن
دو ویژگی پرکاربرد برای کنترل ابعاد و وزن متن:
- font-size: تعیین اندازه متن (برحسب px، em یا rem).
- font-weight: تعیین میزان ضخامت (مثل bold یا مقادیر عددی مثل 400 و 700).
h2 {
font-size: 24px;
font-weight: bold;
}↕️ ۳. تراز بندی و فواصل (Text Alignment)
برای اینکه متنها شلخته نباشند، از ویژگیهای زیر استفاده میکنیم:
- text-align: برای راستچین، چپچین یا وسطچین کردن (
right,left,center,justify). - line-height: فاصله بین خطوط (بسیار مهم برای خوانایی).
- text-decoration: برای حذف یا اضافه کردن خط زیر متن (مثلاً در لینکها).
article {
text-align: justify;
line-height: 1.6;
text-decoration: none;
}🚩 چالش تایپوگرافی:
یک عنوان h3 بسازید که در وسط صفحه قرار بگیرد (center)، رنگ آن قرمز باشد و زیر آن یک خط (underline) وجود داشته باشد.