وثائق CSS قابلة للتشغيل: font-weight في CSS

Q: كيف أجعل النص عريضًا في CSS؟

استخدم font-weight: bold; أو الرقم المكافئ font-weight: 700; على العنصر. ولإزالة الخط العريض من عنوان أو من ، اضبط font-weight: normal; (400).

Q: هل font-weight bold هي نفسها 700؟

نعم. تُحسب bold على أنها 700 وnormal على أنها 400، فيُعرض الشكلان بشكل متطابق.

Q: هل أستخدم font-weight في CSS أم الوسم ؟

استخدم حين تكون الكلمات مهمة، و لنص منسق بشكل مختلف فقط، وfont-weight للتصميم البصري مثل الأزرار والتسميات والعناوين. الوسوم تحمل معنى؛ والخاصية مظهر فقط.

الخط العريض font-weight في CSS: bold والقيم من 100 إلى 900

تجعل الخاصية font-weight النص عريضًا أو رفيعًا أو أي شيء بينهما. تعلّم المقياس الرقمي من 100 إلى 900، وnormal وbold، والقيمتين النسبيتين bolder وlighter، ولماذا لا يظهر أحيانًا أي تغيير.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تجعل النص عريضًا في CSS

تضبط font-weight سماكة الحروف. تجعل bold (وهي نفسها 700) النص عريضًا، وnormal (وهي نفسها 400) هي النص العادي.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

العناوين و<th> و و عريضة افتراضيًا بسبب ملف الأنماط الخاص بالمتصفح، لذلك font-weight: normal هي طريقة إزالة الخط العريض. لمعرفة متى تستخدم  أو  في HTML نفسه، راجع الخط العريض في HTML.

المقياس الرقمي: من 100 إلى 900

للأرقام أسماء قياسية تتبعها عائلات الخطوط:

القيمة	الاسم الشائع
`100`	Thin (رفيع جدًا)
`200`	Extra Light (رفيع إضافي)
`300`	Light (رفيع)
`400`	Normal أو Regular (عادي)
`500`	Medium (متوسط)
`600`	Semi Bold (شبه عريض)
`700`	Bold (عريض)
`800`	Extra Bold (عريض إضافي)
`900`	Black أو Heavy (أسود)

أي رقم من 1 إلى 1000 صالح، فـ 450 و650 مسموحتان أيضًا. أن ترى فرقًا أم لا يعتمد على الخط: المتصفح لا يستطيع رسم إلا الأوزان التي يملكها الخط فعلًا.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui هو خط واجهة نظام التشغيل، وعادةً يأتي بأوزان كثيرة. إن بدا كل سطر أعلاه بأحد وزنين فقط، فخط نظامك لا يملك إلا العادي والعريض.

لماذا لا يظهر أي تغيير للوزن

الخط مجموعة ملفات، غالبًا ملف لكل وزن. حين يغيب الوزن المطلوب بالضبط، يختار المتصفح أقرب وزن متاح:

للقيمة 500 يجرّب 500، ثم الأوزان الأخف، ثم الأثقل.
للقيمة 600 وما فوقها يجرّب الأوزان الأثقل أولًا، ثم الأخف.
إن لم يوجد ملف عريض على الإطلاق، تزيّف معظم المتصفحات واحدًا بتسميك الحروف العادية (خط عريض اصطناعي).

قارن خطًا بأوزان كثيرة بالخط serif، الذي لا يملك في معظم الأنظمة إلا العادي والعريض:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

في عمود serif تعود 300 و500 عادةً إلى الوجه العادي، و600 إلى الوجه العريض. هذه هي الإجابة عن معظم أسئلة «font-weight لا تعمل»: CSS سليمة، لكن الخط ينقصه ذلك الوزن. أما الخط المتغير (ملف واحد بمحور وزن) فيرسم كل قيمة ضمن نطاق أوزانه بسلاسة.

bolder وlighter

bolder وlighter نسبيتان إلى الوزن الذي يرثه العنصر. تنتقلان إلى مجموعة الوزن التالية بدل إضافة مقدار ثابت:

وزن الأب	تعطي `bolder`	تعطي `lighter`
من 100 إلى 349	400	100
من 350 إلى 549	700	100
من 550 إلى 749	900	400
من 750 إلى 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

نمط عملي: مقياس أوزان في متغيرات

اختر ثلاثة أو أربعة أوزان للموقع كله وسمِّها، بدل نثر الأرقام هنا وهناك:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

أخطاء شائعة

توقع أن يبدو كل رقم مختلفًا. وحدها الأوزان الموجودة في الخط تُعرض بشكل مميز.
استخدام  لتسمية زر. نسّق الزر بـ font-weight؛ واترك  و للنصوص.
وضع الرقم بين علامتي تنصيص. font-weight: "700" غير صالحة وتُتجاهل. اكتب font-weight: 700.
الخط العريض للتأكيد في كل مكان. حين يكون كل شيء عريضًا لا يبرز شيء. أبقِ نص الجسم على 400.
أوزان رفيعة للنص الصغير. الأوزان من 100 إلى 300 بأحجام صغيرة صعبة القراءة، خاصةً على خلفيات منخفضة التباين.

الأسئلة الشائعة

كيف أجعل النص عريضًا في CSS؟

استخدم font-weight: bold; أو الرقم المكافئ font-weight: 700; على العنصر. ولإزالة الخط العريض من عنوان أو من ، اضبط font-weight: normal; (400).

ما قيم font-weight؟

أرقام من 1 إلى 1000، تُكتب عادةً بالمئات: 100 رفيع جدًا، 200 رفيع إضافي، 300 رفيع، 400 عادي، 500 متوسط، 600 شبه عريض، 700 عريض، 800 عريض إضافي، 900 أسود. الكلمتان المفتاحيتان normal وbold تساويان 400 و700، وbolder وlighter نسبيتان إلى الأب.

هل font-weight bold هي نفسها 700؟

نعم. تُحسب bold على أنها 700 وnormal على أنها 400، فيُعرض الشكلان بشكل متطابق.

لماذا تبدو font-weight 500 أو 600 مثل normal أو bold؟

لأن الخط لا يملك ذلك الوزن. حين يأتي الخط بالوزنين 400 و700 فقط، يختار المتصفح أقرب ملف متاح، فتُعرض 500 مثل 400 و600 مثل 700. حمّل خطًا بأوزان أكثر أو خطًا متغيرًا.

هل أستخدم font-weight في CSS أم الوسم ؟

استخدم  حين تكون الكلمات مهمة، و لنص منسق بشكل مختلف فقط، وfont-weight للتصميم البصري مثل الأزرار والتسميات والعناوين. الوسوم تحمل معنى؛ والخاصية مظهر فقط.

مفاهيم ذات صلة