cssblog.ir logo
P

font-weight

درشت (بولد) و یا نازک نمودن فونت متن ها

با استفاده از این مشخصه می توان میزان وزن (ضخامت) فونت استفاده شده را تعیین نمود. برای مثال برای درشت تر کردن (bold) نوشته ها می توان از این مشخصه استفاده نمود.

مشخصه font-weightدو نوع مقادیر را قبول می‌کند. نوع اول کلمات کلیدی و نوع دوم اعداد می‌باشد.

اعداد

مقادیر عددی که می توانیم وارد کنیم شامل اعداد بین ۱۰۰ تا ۹۰۰ با گام های صدتایی می شود.

100,200,300,400,500,600,700,800,900

هرچه که این اعداد کمتر باشد متن نازک تر (۱۰۰) و هرچه بزرگتر شوند متن درشت‌تر (۹۰۰) می شود.

کلمات کلیدی

کلمات کلیدی قابل استفاده برای این مشخصه شامل:

normal, bold, bolder, lighter

می شود که به ترتیب معنی عادی، درشت، درشت‌تر و نازک‌تر را دارند. کلمه کلیدی normalبه معنی۴۰۰ وbold به معنی۷۰۰ می باشد.

رفتار مروگرها درباره وزن فونت ها

رفتار مرورگرها درباره وزن های مختلف فونت ها به این شکل است که اگر در font-family تعریف شده وزن های دیگر آن فونت (مانند ۷۰۰ و ۴۰۰) تعریف شده باشند، مرورگر از آنها استفاده خواهد نمود در غیر اینصورت و در حالتی که فقط یک وزن (معمولا regular یا normal) تعریف شده باشد، مرورگر سایر وزن ها را به نوعی از روی فونت عادی تقلید کرده و نمایش می‌دهد که این حالت معمولا در وبسایت های زیادی (بخصوص فارسی)‌ وجود دارد و نوشته‌هایی که وزن آنها bold است معمولا از روی فونت عادی و توسط مرورگر به آن شکل نمایش داده می شوند.

مثال: در مثال زیر یک فونت از google fonts استفاده شده است که دارای وزن های ۳۰۰، ۴۰۰ و ۶۰۰ و ۷۰۰ می باشد. مابقی وزن‌ها که در داخل فونت وجود ندارد بصورت خودکار باتوجه به نزدیک ترین وزن موجود، پردازش و نمایش داده می‌شوند.

 

 

کلمات کلیدی bolder و lighter

نحوه عملکرد این کلمات به این شکل است که این کلمات باتوجه به وزن فونت والد خود، تعیین می‌کنند که وزن فونت به چه اندازه باشد. کلمه lighter برای نازک‌تر کردن و کلمه bolder برای درشت‌تر کردن است و هنگام استفاده از آنها مرورگر به دنبال نزدیک‌ترین وزن نازک‌تر یا درشت‌تر می گردد و در صورتیکه چیزی یافت نشود از وزن های حدود ۴۰۰ یا ۷۰۰ استفاده خواهد نمود. البته این مسئله کاملا به فونت و وزن استفاده شده بستگی دارد و قبل از استفاده از چنین کلماتی حتما از تطابق نتیجه با خواسته خود مطمئن شوید.

نکته ای که درباره این کلمات وجود دارد این است که آنها توسط عناصر فرزند به ارث برده نمی شوند و فقط وزن فونت محاسبه شده (Computed Weight) در این سطح از DOM مبنای محاسبات بعدی خواهد شد.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند