سمك الخط

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 20 من 76.

في CSS، تُستخدم خاصية font-weight للتحكم في ثقل أو سمك النص داخل عنصر HTML.

القيم الرقمية الشائعة لـ font-weight تشمل:

100: رفيع
200: خفيف جداً
300: خفيف

400: عادي
500: متوسط
600: شبه عريض

700: عريض
800: عريض جداً
900: أسود

تشمل قيم الكلمات الرئيسية الشائعة لـ font-weight ما يلي:

normal: يعادل 400
bold: يعادل 700

lighter: يحدد وزناً أخف من العنصر الأب
bolder: يحدد وزناً أكثر سمكاً من العنصر الأب

على سبيل المثال:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>)، وفقرة (<p>)، وقسم (<div>). مهمتك هي استخدام خاصية font-weight لتنسيق هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين font-weight إلى 900.
اكتب قاعدة CSS تستهدف عنصر <p>. قم بتعيين font-weight إلى lighter.
اكتب قاعدة CSS تستهدف عنصر <div>. قم بتعيين font-weight إلى 600.

ورقة مرجعية

تتحكم خاصية font-weight في مدى ثخانة أو سمك النص.

القيم الرقمية:

100: رفيع (Thin)
200: خفيف جداً (Extra Light)
300: خفيف (Light)
400: عادي (Normal)
500: متوسط (Medium)
600: شبه عريض (Semi Bold)
700: عريض (Bold)
800: عريض جداً (Extra Bold)
900: أسود/داكن (Black)

قيم الكلمات المفتاحية:

normal: تعادل 400
bold: تعادل 700
lighter: وزن أخف من العنصر الأب
bolder: وزن أعرض من العنصر الأب

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

جرّب بنفسك

<html>
<head>
    <title>Font Weight</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>