محتوای آموزشی

تنظیم ضخامت متون در صفحات وب

تنظیم ضخامت متون در صفحات وب

در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خصوصیت font-weight در سی اس اس صحبت خواهیم کرد.

در نرم افزارهای ویرایشگر متن مانند word مشاهده کرده اید که امکانی وجود دارد برای ضخیم کردن متون،در سی اس اس این ضخامت به عنوان وزن فونت (font weight) مطرح می شود و می توان آن را از طریق ویژگی font-weight مشخص کرد.

ضخامت یا وزن یک فونت را می توان بوسیله یک کلمه کلیدی یا یک عدد مشخص کرد. عددی که وارد می کنیم می توانیم عددی از 100 تا 900 باشد(البته اعداد باید بر 100 بخش پذیر باشند یعنی می توانیم اعداد 100و200و300 و... و 900 را استفاده کنیم).

نکته : این اعداد در صورتی بر روی ضخامت متون تاثیر می گذارند که فونت استفاده شده این وزن ها را داشته باشید.

تصویر زیر نمایش دهنده وزن های به کار رفته برای یک فونت می باشد.

این فونت تمام وزن ها را دارد

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

.element {
  font-weight: normal;
  font-weight:400;
}

دو کلمه کلیدی دیگر نیز وجود دارد که عبارتند از lighter , bolder ، این دو کلمه کلیدی با توجه به ضخامت ارث رسیده از عنصر پدر محاسبه می شوند.

جدول زیر نشان می دهد که اگر ضخامت فونت عنصر پدر مثلا 300 باشد اگر برای عنصر از کلمه کلیدی bolder یعنی ضخامت بیشتر استفاده کنیم ضخامت فونت عنصر 400 و اگر از کلمه کلیدی lighter یعنی ضخامت کمتر استفاده کنیم ضخامت فونت عنصر 100 می باشد:

inherited value bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

 

همانطور که گفتیم این وزن ها زمانی بر روی ضخامت متون تاثیر می گذارند که فونت استفاده این وزن ها را داشته باشد اما بیشتر مواقع فونت های موجود تمام وزن های ممکن را ندارند. اگر در چنین مواقعی مقدار ویژگی font-weight بر روی ضخامتی تنظیم کنیم که فونت پشتیبانی نمی کند مرورگر بصورت خودکار نزدیک ترین ضخامت یا وزن را نسبت به مقداری که تعیین کرده ایم انتخاب می کند.

 

تصویر زیر مثالی را از یک خانواده فونت نشان می دهد که فقط وزن های 400، 700 و 900 را پشتیبانی می کند. پس مثلا اگر وزن 800 را انتخاب کنیم مرورگر وزن 900 فونت را به کار می گیرد:

نکته : مقدار پیش فرض مرورگرها برای این ویژگی مقدار normal یا همان 400 می باشد.

در دموی زیر مثال هایی از نحوه استفاده از این ویژگی را مشاهده می کنید:

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'