معمولا برخی از فونت ها بصورت های مختلفی وجود دارند که دارای ضخامت متفاوتی هستند در سی اس اس این ضخامت به عنوان وزن فونت (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 فونت را به کار می گیرد:
این یعنی در این مواقع کلمات کلیدی 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.
بسیار عالی