نکاتی کاربردی در مورد CSS (جلسه 11) : نکاتی در مورد مقادیر lighter و bolder

- visibility ۰ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

ویژگی font-weight کلمات کلیدی نسبی رو قبول میکنه

بصورت عادی زمانی که درون سایتای مختلف ویژگی font-weight رو مشاهده میکنید، مقادیری مثل normal و bold برای اون قرار داده شده. بعضی مواقع مقادیر عددی برای این ویژگی قرار داده میشه. مثل 100 یا 200 و این اعداد 100 تا 100 تا زیاد میشن و تا 900 هم ادامه پیدا میکنن و ضخامت متن رو مشخص میکنن. دو مقدار دیگه ای که تقریبا فراموش شدن، مقادیر bolder و lighter هستن.

مطابق با چیزی که درون Spec یا همون استاندارد بیان شده، با قرار دادن این کلید واژه ها، ضخامت فونت ضخیمتر یا نازکتر از مقداری که به اون المنت به ارث رسیده، اعمال میشه. شما بیشتر زمانی با این مقادیر سروکار دارید که فونتی که با اون کار میکنید دارای چند وزن بوده که اون فونتا ضخیمتر از فونت Bold نرمال هستن و یا نازکتر از متن عادی هستن.

در مقادیری که 100 تا 100 تا اضافه میشن مقدار bold همون 700 هست و مقدار normal برابر با 400 هست. پس شما اگر یک فونت داشته باشید که وزن 300 داشته باشه و کمتر از اون رو نداشته باشه، زمانی که از مقدار lighter استفاده میکنید، اگر مقداری که به اون به ارث رسیده 400 باشه، مقدار 300 برای اعمال میشه. اگر اون فونت مقدار کمتری رو پشتیبانی نکنه و 400 کمترین مقدار اون باشه، پس زمانی که از lighter استفاده میکنید، هیچ اثری نخواهد داشت.

به دموی زیر نگاه کنید: در این نمونه ما از یک فونت بنام Exo 2 استفاده کردیم که اگر اون رو مشاهده کنید، میبینید که 18 استایل متفاوت برای اون تعریف شده. همونطور که دیدید 12 المنت و باکس تو در تو قرار دادیم و درون هر کدوم متنی رو گذاشتیم. برای مقدار font-weight اونا هم مقادیر bolder و lighter رو استفاده کردیم. کدهای CSS که در این نمونه مورد استفاده قرار گرفته بصورت زیر هست. به Comment هایی که جلوی هر خط قرار داده شده دقت کنید.

همونطور که دیدید این کار به زیبایی و با توجه به مقداری که به اون به ارث رسیده محاسبه میشه و اگر اون فونت مقداری کمتر و یا بیشتر داشته باشه رو قرار میده. همونطور که دیدید از کم به زیاد و از زیاد به کم رفتیم و فقط مقادیر 100 و 400 و 700 و 900 اعمال شدن و بقیه مقادیر همچون 200 و 300 و ... اعمال نشدن و این مورد بخاطر این هست که فونت مورد نظر این مقادیر رو پشتیبانی نمیکنه. شاید کار با این مقادیر در ابتدا کمی گیج کننده باشه ولی بعد از مدتی تمرین با اونا میتونین به راحتی از قدرتشون استفاده کنید.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.