عائلة الخط

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

في CSS، تُستخدم الخاصية font-family لتحديد نوع الخط للنص داخل عنصر HTML. تتيح لك هذه الخاصية إدراج قائمة بالخطوط المفضلة لنصك. إذا لم يكن الخط الأول متاحاً، فسيستخدم المتصفح الخط التالي في القائمة، مما يضمن مظهراً مشابهاً.

إليك الصيغة الأساسية لاستخدام خاصية font-family:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: أسماء عائلات الخطوط المفضلة، مرتبة حسب الأفضلية. إذا كان font1 غير متاح، فسيحاول المتصفح استخدام font2، وهكذا.

generic-family: اسم عائلة خطوط عام، مثل serif، أو sans-serif، أو monospace، أو cursive، أو fantasy. يعمل هذا كبديل في حال لم تكن أي من الخطوط المحددة متاحة.

عند تحديد أسماء عائلات الخطوط (font family names)، من المهم اتباع هذه الإرشادات:

إذا كان اسم عائلة الخط يحتوي على مسافات بيضاء، فيجب وضعه بين علامتي اقتباس (على سبيل المثال، "Times New Roman"، "Courier New").

يجب الفصل بين أسماء عائلات الخطوط المتعددة بفاصلات.

من الممارسات الجيدة تضمين عائلة خطوط عامة (generic font family) كخيار أخير في القائمة لضمان استخدام بديل مناسب في حال لم يكن أي من الخطوط المحددة متاحاً.

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

p {
    font-family: Arial, Helvetica, sans-serif;
}

التحدي

سهل

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

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين font-family إلى "Times New Roman", Times, serif.
اكتب قاعدة CSS تستهدف عنصر <p>. قم بتعيين font-family إلى Arial, Helvetica, sans-serif.

ورقة مرجعية

تحدد خاصية font-family نوع الخط للنص. قم بإدراج الخطوط المفضلة بالترتيب - إذا لم يكن الخط الأول متاحاً، فسيستخدم المتصفح الخط التالي.

الصيغة الأساسية:

selector {
    font-family: font1, font2, generic-family;
}

إرشادات:

تحتاج أسماء الخطوط التي تحتوي على مسافات إلى علامات اقتباس: "Times New Roman"
افصل بين الخطوط المتعددة بفاصلات
قم بتضمين عائلة عامة (serif، sans-serif، monospace، cursive، fantasy) كخيار احتياطي

مثال:

p {
    font-family: Arial, Helvetica, sans-serif;
}

جرّب بنفسك

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