ویژگی font-weight در CSS

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 پشتیبانی می کنند.