font-weight Property
ویژگی font-weight
در CSS میزان ضخامت یا در اصلاح وزن فونت را مشخص می کند.
نحوه نوشتار
/* مقادیر با کلیدواژه */ font-weight: normal; font-weight: bold; /* مقادیر وابسته به مقدار والد */ font-weight: lighter; font-weight: bolder; /* مقادیر عددی */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900;
مقادیر
normal
این مقدار بصورت پیشفرض در نظر گرفته می شود و برابر است با مقدار عددی 400.
bold
این مقدار ضخامت فونت را بیشتر می کند و برابر است با مقدار عددی 700.
lighter
این مقدار ضخامت فونت را کمتر می کند و میزان آن بستگی به مقدار داده شده به عنصر والد دارد.
bolder
این مقدار ضخامت فونت را بیشتر می کند و میزان آن بستگی به مقدار داده شده به عنصر والد دارد.
مقادیر عددی
این مقادیر شامل 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 ,900 میباشند. هرچه مقدار بالاتر می رود ضخامت فونت بیشتر می شود. البته اعمال هر یک از این مقادیر به پشتیبانی فونت استفاده شده از مقدار مورد نظر دارد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<p class="lighter"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. </p> <p class="bold"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. </p> <p class="w300"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. </p> <p class="w900"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. </p>
css
p { font-family: tahoma; color: greenyellow; background-color: #333333; padding: 10px 20px; margin: 8px 0 0 0; } .lighter { font-weight: lighter; } .bold { font-weight: bold; } .w300 { font-weight: 300; } .w900 { font-weight: 900; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.