جلسه ۲۹ – وزن و استایل فونت ها

چگونه می‌توانیم استایل فونت ها را مشخص کنیم؟ نحوه مشخص کردن وزن فونت ها در CSS چگونه است ؟ منظور از Font-weight چیست؟ منظور از Font-size چیست؟ تو این مقاله، چند خاصیت کاربردی دیگه از فونت ها رو یاد می‌گیریم.

خاصیت font-style

در مقاله قبل در رابطه با نحوه فراخوانی فونت ها در CSS صحبت کردیم. حالا زمان معرفی خاصیت های فونت هاست. توسط خاصیت Font-style ، می‌تونیم متن رو به حالت های خاصی ببریم. مقادیری که مورد قبول این خاصیت هستن عبارتند از:

• oblique
• italic
• normal

برای فهم بهتر، به مثال های زیر توجه کنین:

کد HTML:

<div>Hello everyone !</div>

oblique: متن رو مستقیما زاویه دار می‌کنه.

کد CSS:

div{
   font-style: oblique ;
}

نتیجه:

italic: کارش دقیقا شبیه به oblique هست. با این تفاوت که می‌تونه تو بعضی از فونت ها، به فرم هنری تری هم نوشته بشه.

کد CSS:

div{
   font-style: italic ;
}

نتیجه:

normal: تغییری در استایل فونت ایجاد نمی‌کنه.

خاصیت font-size

ما در مقاله طول و عرض در CSS میزفا یاد گرفتیم، اندازه ی متن رو با خاصیت های height یا width نمی‌شه تغییر داد و ما ناچاریم از خاصیت های دیگه‌ای استفاده کنیم.

توسط خاصیت font-size، می‌تونیم سایز متن مورد نظر خودمون رو تغییر بدیم.

این خاصیت از جنس اندازه هست، و همونطور که می‌دونیم می‌تونه طبق چندین واحد مختلف مقداردهی بشه.

واحد ها رو در اینجا به شکل خلاصه بررسی می‌کنیم، برای مطالعه کامل می‌تونین به مقاله واحد ها در CSS میزفا مراجعه کنین.

واحد px

این واحد رو خیلی جا ها با هم دیدیم، و متوجه شدیم یک واحد ثابت هست و با تغییر سایز صفحه، تغییری در اون به وجود نمیاد.

واحد pt

این واحد، بر حسب point یا نقطه مقدار دهی می‌شه. شباهت بسیاری به واحد px داره و همیشه، سایز فونت رو ثابت نگه می‌داره.

واحد em

واحد em، با توجه به سایز فونت پیش فرضی که برای صفحه مشخص شده، اندازه فونت موردنظر ما رو مشخص می‌کنه.

برای مثال، فرض کنید سایز فونت در صفحه، ۱۶ پیکسل هست. اگه ما از کد زیر، برای یک متن دلخواه استفاده کنیم:

p{
   font-size: 3em;
}

سایز متنی که درون تگ p قرار داره، برابر با ۴۸ پیکسل می‌شه. به طور خلاصه، واحد em مشخص می‌کنه که اندازه متن ما چند برابر سایز فونت پیش فرض در صفحه می‌شه.

واحد درصد یا ٪

بیاین فرض کنیم سایز فونت پیش فرض کل صفحه، برابر ۱۶ پیکسل باشه. در اینجا، صد درصد برابر با ۱۶ پیکسل خواهد بود.

بنابراین، اندازه هایی که بر حسب درصد نوشته می‌شن، به شکل درصدی از اندازه فونت پیش فرض صفحه عمل می‌کنن.

کد CSS:

p{
   font-size: 50%;
}

در کد بالا، سایز متن داخل عنصر پاراگراف، ۸ پیکسل خواهد بود.

واحد vw و vh

این دو واحد، مخفف عبارات viewport width و viewport height هستن.

برای مطالعه مفهوم viewport، می‌تونین به مقاله واکنش گرایی و ابعاد عناصر میزفا مراجعه کنین.

واحد vw به معنای یک درصد از viewport هست. برای درک بهتر به مثال زیر توجه کنین:

کد HTML:

<div></div>

کد CSS:

div{
   background-color: red;
   height: 20vh;
   width: 40vw;
}

نتیجه:

همونطور که می‌بینید، این دو واحد شباهت بسیاری به واحد درصد دارن. تفاوتی که دارن اینه که اندازه عناصر در اینجا، ربطی به عنصر والد اون ها نداره و مستقیما به viewport یا صفحه ما مربوط می‌شه.

بنابراین عنصری با عرض ۳۰vw، با عرض عنصری که عنصر پدر نداره و عرض اون ۳۰٪ قرار داده شده، تفاوت نداره.

منتهی استفاده از این دو واحد، تو خاصیت font-size یخورده متفاوته. به مثال زیر توجه کنین:

کد HTML:

<p> Mizfa CSS </p>

کد CSS:

p{
   font-size: 10vw;
}

نتیجه:

ابهامی که پیش میاد، اینه که آیا واقعا عرض متن مورد نظر، تنها ۱۰درصد صفحست؟ چون خیلی بزرگ تر به نظر می‌رسه!

پاسخ به این ابهام، در نکته زیر خلاصه می‌شه:

در خاصیت font-size، واحد های vw و vh به حروف اختصاص داده می‌شن. یعنی اندازه 10vw مختص کل متن نیست. بلکه با توجه به تک تک  حروف سنجیده می‌شه.

خاصیت font-weight

کاری که انجام می‌ده، توی اسمش خلاصه شده، وزن فونت 🙂

مقادیر قابل قبول این خاصیت عبارتند از:

• اعداد از ۱۰۰ تا ۹۰۰
• bold
• lighter
• normal

اعداد متغیر از ۱۰۰ تا ۹۰۰ بدون واحد هستن، و وظیفه ضخیم کردن متن ما رو بر عهده دارن.

هرچی به ۹۰۰ نزدیک تر، ضخیم تر و هرچی به ۱۰۰ نزدیک تر، نرمال تر و طبیعی تر.

مقادیر دیگه هم کارایی کم و بیش یکسانی با مقادیر عددی دارن. تو شکل زیر می‌تونیم قضیه رو بهتر درک کنیم:

نکته: تمامی فونت ها نمی‌تونن این مقادیر رو قبول کنن، پس اگه از فونت خاصی استفاده می‌کنید و مثلا می‌بینید وزن فونت lighter اثری روی نوشتتون نداره متعجب نشید.

خاصیت font-variant

این خاصیت، مقادیر زیر رو می‌پذیره:

• normal
• small caps

برای اینکه خوب کار این خاصیت رو متوجه بشیم، کافیه به مثال های زیر توجه کنیم:

کد HTML:

<p class="paragraph1"> Mizfa tutorial </p>
<p class="paragraph2">Mizfa tutorial </p>

کد CSS:

.paragraph1{
   font-variant: small-caps;
   font-size: 3em;
   font-family: sans-serif;
}

.paragraph2{
   font-variant: normal;
   font-size: 3em;
   font-family: sans-serif;
}

نتیجه:

نکته: مقدار small caps روی حروف بزرگ عمل نمی‌کنه.  همونطور که در مثال اول هم می‌بینید، حرف اول عبارت یعنی M مشمول تغییر نشده و به صورت طبیعی خودش باقی مونده.

بنابراین نتیجه می‌گیریم که اگه تمام بند رو با حروف بزرگ می‌نوشتیم، باید انتظار اینطور چیزی رو می‌داشتیم:

اگه تو مطالب به ابهام و سوالی برخوردین، راحت باشین و اون رو تو قسمت نظرات مطرح کنین تا مشکل رو با هم برطرف کنیم 🙂

پایان ترم

سوال:

من اسم خودم رو با مطالب مقاله های مربوط به فونت نوشتم.

شما هم نتیجه زیر رو با نام خودتون بسازین و کد CSS اون رو در قسمت نظرات بنویسین:

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله از css اموزش، با چند خاصیت باقی مونده از استایل دهی به متن آشنا شدیم و اون ها رو یاد گرفتیم.

خاصیت های مورد نظر عبارت بودن از:

• font-size: سایز و ابعاد متن رو تعریف می‌کرد و مقادیر مورد قبول اون، از جنس اندازه بودن.
• font-style: حالت های مختلفی از جمله italic به متن اختصاص می‌داد.
• font-weight: وزن متن رو مشخص می‌کرد (همون نازک بودن یا کلفت بودن کلمات!).
• font-variant: می‌تونست متن با حروف بزرگ رو در ابعاد کوچیک بنویسه.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی