چهار Property پایه برای شکلدهی ظاهر متن
در درس قبل دیدیم که چطور فونت مناسب رو انتخاب کنیم. حالا وقتشه چهار Property مهم دیگه رو ببینیم که مشخص میکنن اون فونت انتخابشده، دقیقاً با چه اندازه، چه ضخامت، چه سبک و چه میزان کشیدگی نمایش داده بشه.
font-size: اندازه متن
h1 {
font-size: 2.5rem;
}
p {
font-size: 1rem;
}Property به اسم font-size اندازه کلی متن رو مشخص میکنه. همونطور که در فصل ۶ بهطور کامل دیدیم، برای این Property معمولاً واحد rem ترجیح داده میشه؛ چون هم نسبت به تنظیمات کاربر واکنشپذیره و هم در ساختارهای تودرتو دچار رشد تجمعی نمیشه.
مقادیر کلیدواژهای نسبی
.small-text {
font-size: smaller;
}
.large-text {
font-size: larger;
}علاوه بر واحدهای عددی، CSS چند کلیدواژه نسبی هم برای font-size تعریف کرده، مثل smaller و larger، که اندازه رو نسبت به فونت والد کوچکتر یا بزرگتر میکنن؛ هرچند این کلیدواژهها نسبت به مقادیر دقیق عددی، کاربرد بسیار محدودتری در پروژههای واقعی دارن.
font-weight: ضخامت متن
p {
font-weight: normal;
}
strong {
font-weight: bold;
}Property به اسم font-weight ضخامت (پررنگی) حروف رو کنترل میکنه. دو مقدار کلیدواژهای اصلی، normal (معادل عددی ۴۰۰) و bold (معادل عددی ۷۰۰) هستن.
مقادیر عددی دقیقتر
.thin {
font-weight: 100;
}
.regular {
font-weight: 400;
}
.semi-bold {
font-weight: 600;
}
.black {
font-weight: 900;
}علاوه بر normal و bold، میشه از مقادیر عددی بین 1 تا 1000 هم استفاده کرد (البته معمولاً مضربهای ۱۰۰ رایجترن: ۱۰۰، ۲۰۰، ۳۰۰ و به همین ترتیب تا ۹۰۰). هرچه عدد بزرگتر باشه، حروف ضخیمتر خواهند بود. البته باید توجه داشت که استفاده واقعی از این مقادیر عددی دقیق، به این بستگی داره که فونت انتخابشده، اصلاً نسخههایی با اون ضخامت خاص رو داشته باشه یا نه؛ بعضی فونتها فقط چند ضخامت محدود (مثلاً فقط ۴۰۰ و ۷۰۰) ارائه میدن، و بعضی فونتهای مدرنتر (Variable Fonts که در درسهای بعدی میبینیم)، طیف کاملتری از ۱ تا ۱۰۰۰ رو پشتیبانی میکنن.
مقادیر نسبی: lighter و bolder
.parent {
font-weight: 400;
}
.child {
font-weight: bolder;
}دقیقاً مشابه smaller و larger برای font-size، مقادیر lighter و bolder هم ضخامت رو نسبت به مقدار فونت والد تغییر میدن، نه یک مقدار مطلق.
font-style: حالت کج یا معمولی
em {
font-style: italic;
}
.upright {
font-style: normal;
}Property به اسم font-style مشخص میکنه متن بهصورت معمولی نمایش داده بشه یا بهصورت کج (مورب). سه مقدار اصلی داره:
| مقدار | رفتار |
|---|---|
| normal | متن معمولی و بدون کجی (مقدار پیشفرض) |
| italic | استفاده از نسخه Italic واقعی فونت (در صورت وجود در فایل فونت) |
| oblique | کج کردن مصنوعی نسخه معمولی فونت، وقتی نسخه Italic واقعی در دسترس نیست |
تفاوت مهم بین italic و oblique: italic به دنبال یک نسخه کاملاً طراحیشده و مجزا از همون فونت میگرده (که معمولاً شکل حروفش کمی متفاوت از نسخه معمولیه، نه فقط کجشده)؛ در حالی که oblique صرفاً همون حروف معمولی رو بهصورت مصنوعی و مکانیکی کج میکنه. اگه فونت انتخابی، نسخه Italic واقعی نداشته باشه، مرورگر معمولاً بهطور خودکار به حالت مشابه oblique بازمیگرده.
font-stretch: میزان کشیدگی افقی حروف
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}Property به اسم font-stretch میزان کشیدگی افقی حروف رو کنترل میکنه؛ یعنی اینکه حروف باریکتر (فشردهتر) یا پهنتر از حالت معمولی نمایش داده بشن.
مقادیر کلیدواژهای رایج
| مقدار | توضیح |
|---|---|
| ultra-condensed | بسیار باریک |
| condensed | باریک |
| normal | حالت معمولی (پیشفرض) |
| expanded | پهن |
| ultra-expanded | بسیار پهن |
نکته مهم درباره font-stretch: این Property فقط زمانی نتیجه واقعی و معناداری داره که فونت انتخابی، نسخههای مختلف کشیدگی رو در فایل فونت خودش داشته باشه (چیزی که در بسیاری از فونتهای استاندارد و رایج وجود نداره). اگه فونت انتخابی همچین نسخههایی نداشته باشه، مرورگر معمولاً یا این Property رو کاملاً نادیده میگیره، یا در بهترین حالت، یک کشیدگی مصنوعی و محدود اعمال میکنه.
یک مثال ترکیبی از هر چهار Property
.heading {
font-family: "Georgia", serif;
font-size: 2rem;
font-weight: 700;
font-style: italic;
}
.caption {
font-family: Arial, sans-serif;
font-size: 0.875rem;
font-weight: 300;
font-style: normal;
}در این مثال، .heading یک تیتر بزرگ، ضخیم و کج تعریف میکنه؛ در حالی که .caption یک متن کوچکتر، نازکتر و بدون کجی رو مشخص میکنه. ترکیب این چهار Property، کنترل کاملی روی ظاهر پایهای هر متنی به ما میده.
نکات مهم
- font-size معمولاً با واحد rem تعریف میشود تا با تنظیمات دسترسیپذیری کاربر هماهنگ باشد.
- مقادیر عددی font-weight فقط زمانی معنا دارند که فونت انتخابی، آن ضخامت خاص را واقعاً پشتیبانی کند.
- italic به دنبال یک نسخه طراحیشده واقعی میگردد، در حالی که oblique صرفاً کجی مصنوعی ایجاد میکند.
اشتباهات رایج
- استفاده از یک مقدار عددی خاص برای font-weight (مثل 550) بدون اطمینان از پشتیبانی فونت انتخابی از آن ضخامت.
- تصور یکسان بودن italic و oblique، در حالی که این دو از نظر منبع تولید کجی متفاوت هستند.
- استفاده از font-stretch با انتظار نتیجه واقعی، در حالی که فونت انتخابی نسخههای کشیدگی مختلف را ارائه نمیدهد.
جمعبندی
font-size اندازه متن، font-weight ضخامت آن، font-style حالت کج یا معمولی بودن، و font-stretch میزان کشیدگی افقی حروف را کنترل میکند. تأثیر واقعی مقادیر دقیقتر (مثل اعداد خاص font-weight یا مقادیر font-stretch) همیشه به این بستگی دارد که فایل فونت انتخابی، آن نسخه یا ویژگی خاص را واقعاً پشتیبانی کند یا نه.