font-weight

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

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

 

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

 

 


.element {
  font-weight: 700;
}

 

کلمات کلیدی مشخص کننده یکی از این اعداد می باشند. مثلا کلمه normal مترادف عدد 400 و یا bold مترادف 700 می باشد.

 


.element {
  font-weight: normal; /* = 400 */
}

 

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

جدول زیر نشان می دهد که اگر ضخامت فونت عنصر پدر مثلا 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

 


.parent {
  font-weight: 300;
}

.child {
  font-weight: bolder;  /* 400 */
  font-weight: lighter; /* 100 */
}

 

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

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

 
weight-mappings
 

این یعنی در این مواقع کلمات کلیدی bolder و lighter نتیجه ای که با توجه به جدول از آنها توقع داریم را نخواهند داشت.

 

توجه داشته باشید که مقدار اولیه برای font-weight کلمه کلیدی normal یا همان وزن 400 می باشد.

تمام مقادیر ممکن برای این ویژگی:

 


font-weight: normal; /* initial value */
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

 

دموی زیر را بررسی کنید:

 

See the Pen font-weight by Mojtaba Seyedi (@seyedi) on CodePen.


 

یک دیدگاه برای “font-weight

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *