• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 499 ۳ دی ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram