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.