فونت در CSS
دیگر بلدید متن چطور روی خط بنشیند. فونت می‌گوید کدام حروف را ببینید — خانوادهٔ تایپ‌فیس، اندازه، ضخامت و اینکه کج (italic) باشد یا نه. بارگذاری فونت وب سفارشی درس بعدی است؛ اینجا ویژگی‌های اصلی فونت را محکم می‌کنید.
ابزارهای فونت یک‌نگاهه
📊 ویژگی‌های رایج فونت
| ویژگی | کار روزمره |
|---|---|
font-family |
پشتهٔ تایپ‌فیس را نام می‌برد (به‌همراه fallback عمومی) |
font-size |
اندازهٔ متن را می‌گذارد |
font-weight |
ضخامت/پررنگی را می‌گذارد (مثل 400، 700، bold) |
font-style |
normal یا italic (و استایل‌های مرتبط) |
font (میان‌بر) |
استایل، وزن، اندازه و خانواده را در یک اعلان جمع می‌کند |
پشتهٔ font-family
اول فونت‌های ترجیحی را بنویسید، بعد جایگزین‌های امن‌تر، و در پایان یک خانوادهٔ عمومی مثل sans-serif یا serif تا همیشه چیزی رسم شود.
پشتهٔ sans-serif خوانا
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}اندازهٔ فونت
font-size اندازهٔ متن را می‌گذارد. واحدهای نسبی مثل rem اغلب با صفحه آرام‌تر مقیاس می‌شوند؛ px و کلیدواژه‌هایی مثل large هم کار می‌کنند.
اندازهٔ عنوان و بدنه
cssh1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}وزن فونت
font-weight پررنگی را کنترل می‌کند. وزن عددی (400، 700) یا کلیدواژه (normal، bold) رایج‌اند. خودِ فیس باید آن وزن را پشتیبانی کند.
تأکید با وزن
css.lead {
font-weight: 700;
}
.caption {
font-weight: 400;
}استایل فونت — italic
font-style: italic متن را کج می‌کند وقتی فیس ایتالیک موجود باشد. برای نقل‌قول یا تأکید نرم؛ نه برای هر پاراگراف.
نقل‌قول ایتالیک
cssblockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}میان‌بر font
میان‌بر font می‌تواند استایل، وزن، اندازه و خانواده را با هم بگذارد. در شکلی که بیشتر مرورگرها انتظار دارند، اندازه و خانواده لازم‌اند.
میان‌بر font روی عنوان کارت
css.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}عادت آرام برای بدنه
یک پشتهٔ واضح برای صفحه، وزن یا اندازهٔ کمی قوی‌تر برای عنوان‌ها، و متن بدنهٔ راحت برای خواندن.
پایهٔ فونت صفحه
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}خودتان امتحان کنید
- برای
bodyپشتهٔ sans-serif بگذارید که بهsans-serifختم شود. - به
h1اندازهٔ بزرگ‌تر وfont-weight: 700بدهید. - یک
blockquoteرا باfont-style: italicو پشتهٔ serif استایل کنید. - یک عنوان را با میان‌بر
fontبازنویسی کنید. - همان پاراگراف را در serif و sans-serif مقایسه کنید — حس صفحه عوض می‌شود.
اشتباهات رایج
- فقط یک فونت فانتزی بدون fallback (وقتی آن فیس نباشد ظاهر می‌شکند)
- همه‌جا
pxخیلی بزرگ بدون فکر نسبی - درخواست
font-weight: 900وقتی فیس فقط regular و bold دارد - پریدن به
@font-face/ فونت وب میزبانی‌شده همین‌جا (درس بعدی) - استفاده از text-align یا text-decoration وقتی منظورتان font-family یا font-weight بود
خلاصه
font-familyپشته می‌نویسد و باید به خانوادهٔ عمومی ختم شودfont-sizeاندازه را می‌گذارد؛ واحد نسبی اغلب آرام‌تر مقیاس می‌شودfont-weightوfont-styleتأکید پررنگ و ایتالیک می‌دهند- میان‌بر
fontاستایل، وزن، اندازه و خانواده را جمع می‌کند - پشتهٔ بدنه را واضح نگه دارید؛ بارگذاری فونت وب سفارشی برای درس بعدی
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود