משפחת גופנים

חלק מהיחידה עיצוב באמצעות 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. זה משמש כחלופה אם אף אחד מהגופנים שצוינו אינו זמין.

כשמציינים שמות של משפחות גופנים, חשוב לפעול לפי ההנחיות האלה:

אם שם של משפחת גופנים מכיל רווחים, יש לתחום אותו במרכאות (למשל, "Times New Roman", "Courier New").

יש להפריד בין שמות של משפחות גופנים באמצעות פסיקים.

נהוג להוסיף משפחת גופנים כללית כאפשרות האחרונה ברשימה, כדי להבטיח שימוש בגופן חלופי מתאים אם אף אחד מהגופנים שצוינו אינו זמין.

לדוגמה:

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.

נסו בעצמכם

<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>