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

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

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

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

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

در مقادیری که ۱۰۰ تا ۱۰۰ تا اضافه میشن مقدار bold همون ۷۰۰ هست و مقدار normal برابر با ۴۰۰ هست. پس شما اگر یک فونت داشته باشید که وزن ۳۰۰ داشته باشه و کمتر از اون رو نداشته باشه، زمانی که از مقدار lighter استفاده میکنید، اگر مقداری که به اون به ارث رسیده ۴۰۰ باشه، مقدار ۳۰۰ برای اعمال میشه. اگر اون فونت مقدار کمتری رو پشتیبانی نکنه و ۴۰۰ کمترین مقدار اون باشه، پس زمانی که از lighter استفاده میکنید، هیچ اثری نخواهد داشت.

به دموی زیر نگاه کنید:

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

.box {
  font-weight: 100;
}

.box-2 {
  font-weight: bolder; /* maps to 400 */
}

.box-3 {
  font-weight: bolder; /* maps to 700 */
}

.box-4 {
  font-weight: 400;
}

.box-5 {
  font-weight: bolder; /* maps to 700 */
}

.box-6 {
  font-weight: bolder; /* maps to 900 */
}

.box-7 {
  font-weight: 700;
}

.box-8 {
  font-weight: bolder; /* maps to 900 */
}

.box-9 {
  font-weight: bolder; /* maps to 900 */
}

.box-10 {
  font-weight: lighter; /* maps to 700 */
}

.box-11 {
  font-weight: lighter; /* maps to 400 */
}

.box-12 {
  font-weight: lighter; /* maps to 100 */
}

همونطور که دیدید این کار به زیبایی و با توجه به مقداری که به اون به ارث رسیده محاسبه میشه و اگر اون فونت مقداری کمتر و یا بیشتر داشته باشه رو قرار میده. همونطور که دیدید از کم به زیاد و از زیاد به کم رفتیم و فقط مقادیر ۱۰۰ و ۴۰۰ و ۷۰۰ و ۹۰۰ اعمال شدن و بقیه مقادیر همچون ۲۰۰ و ۳۰۰ و … اعمال نشدن و این مورد بخاطر این هست که فونت مورد نظر این مقادیر رو پشتیبانی نمیکنه. شاید کار با این مقادیر در ابتدا کمی گیج کننده باشه ولی بعد از مدتی تمرین با اونا میتونین به راحتی از قدرتشون استفاده کنید.

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

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0