حجم الخط

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

في CSS، تُستخدم خاصية font-size للتحكم في حجم النص داخل عنصر HTML.

إليك بعض الوحدات الشائعة المستخدمة لتحديد أحجام الخطوط:

بكسل (px): وحدة مطلقة تحدد حجم الخط بالبكسل. هذه هي الوحدة الأكثر مباشرة وشيوعاً في الاستخدام لضبط أحجام الخطوط.

Ems (em): وحدة نسبية تعتمد على حجم الخط للعنصر الأب. على سبيل المثال، إذا كان للعنصر الأب حجم خط قدره 16px، فإن 1em تساوي 16px، و 2em تساوي 32px، وهكذا.

ريمز (rem): وحدة نسبية تعتمد على حجم الخط للعنصر الجذر (<html>). توفر هذه الوحدة اتساقاً أكبر عبر المستند، حيث لا تتأثر بحجم خط العناصر الأب.

النسب المئوية (%): وحدة نسبية تعتمد على حجم خط العنصر الأب، مشابهة لـ em. على سبيل المثال، إذا كان للعنصر الأب حجم خط قدره 16px، فإن 100% تساوي 16px، و 150% تساوي 24px، وهكذا.

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

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

في هذا المثال، يتم تعيين حجم الخط لجميع عناصر <p> (الفقرة) إلى 16px، وجميع عناوين <h1> إلى 2.5em (والذي سيكون نسبيًا لحجم خط العنصر الأب)، ويتم تعيين حجم الخط الأساسي للمستند إلى 1.4rem، وجميع العناصر التي تحمل الفئة small-text لها حجم خط قدره 80% (والذي سيكون نسبيًا لحجم خط العنصر الأب).

التحدي

سهل

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

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين font-size إلى 32px.
اكتب قاعدة CSS تستهدف عنصر <p>. قم بتعيين font-size إلى 1.2em.
اكتب قاعدة CSS تستهدف عنصر <div>. قم بتعيين font-size إلى 120%.

ورقة مرجعية

تتحكم خاصية font-size في حجم النص داخل عنصر HTML.

الوحدات الشائعة لأحجام الخطوط:

بكسل (px): وحدة مطلقة تحدد حجم الخط بالبكسل
Ems (em): وحدة نسبية تعتمد على حجم خط العنصر الأب
Rems (rem): وحدة نسبية تعتمد على حجم خط العنصر الجذري (root)
النسب المئوية (%): وحدة نسبية تعتمد على حجم خط العنصر الأب

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

جرّب بنفسك

<html>
<head>
    <title>Font Size</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>