Get Adobe Flash player
דף הבית כללי עיצוב מאפייני הגופן: א'

מאפייני הגופן ב CSS נועדו לשלוט על הגופן עצמו. עיצוב האתר באמצעות הגופן הוא נפוץ ביותר, ועל כן חשוב.

בין המאפיינים של הגופן נמצא את:

שימושמאפיין
גודל הגופן font-size
סוג הגופן font-family
סגנון הגופן font-style
עובי (הדגשה) font-weight
החלטה לגבי אות גדולה font-variant

מאפיין: גודל הגופן

המאפיין האחראי על גודל הגופן הוא font-size.

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

גודל מוחלט

גודל הגופן נקבע ע"י מידות ידועות: פיקסלים (px), נקודות (pt) ומידות אורך (cm, mm, in). היתרון של השימוש בגודל מוחלט הוא בנוחיותו - מידות ברורות וידועות

הערה: השימוש בנקודות, מקביל לגדלים המקובלים במעבדי תמלילים. הבעייה ביחידות מידה אלה שהן תלויות ברמת הרזולוציה של מערכת ההפעלה. בגלל השוני שברמות אלו (למשל בין מקינטוש לחלונות), גודל האותיות ביחס לאלמנטים אחרים במסך, נראה שונה במחשבים השונים. על כן מומלץ לעבוד עם פיקסלים.

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

ברירת המחדל של הדפדפנים: כאשר לא קובעים גודל לגופן, הוא ייקבל את הגודל 16px.

גודל יחסי

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

הדרך לעשות זאת היא באמצעות היחידה em. גודלו של 1em שווה לגודל ברירת המחדל של הדפדפן - 16px.

כאשר עובדים עם ערכי גודל ב em, הגודל המתקבל הוא: מכפלת ערך ה em בגודל הגופן של הסביבה בה נמצאים.

לדוגמא:

<p style="font-size: 12px;">טקסט בגודל 12 פיקסלים<span style="font-size: 1.5em;">הטקסט גדל ל- 18 פיקסלים</span></p>

והתוצאה:

טקסט בגודל 12 פיקסלים הטקסט גדל ל- 18 פיקסלים

אם לא ניתן כל ערך לגודל הגופן, הערך המחושב של הגופן (בפיקסלים), יהיה הכפלת ערך ה-em ב-16.

למשל 1.25em יציג גופן בגודל השווה ל-20px.

הצעות לקביעת ערכי גודל

גודל בסיסי

נוח מאוד להגדיר את ברירת המחדל של הדף לגודל 10px ואז, החישוב באמצעות em הוא קל וברור. 1.2em יהיה שווה ערך ל 12px וכו'.

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

הפתרון המומלץ הוא לקבוע ערך חדש לברירת מחדל בגודל 10px, אבל לקבוע אותו באחוזים. מאחר והערך הבסיסי הוא 16px, קביעת ברירת מחדל חדשה של 62.5% תעמיד אותו על ערך השווה ל-10px לפי החישוב: 0.625x16=10

<style type="text/css">
 body {font-size: 62.5%;}
 p {font-size: 1.4em;}
</style>
כותרות בדף

שימוש ב CSS יכול לקבוע ערכי גודל לכל הטקסט שבדף, כולל לכותרות. עובדה זו גורמת לכך שלפעמים אנשים נוטים לקבוע כללי CSS לכותרות תוך ויתור בשימוש עם תגי הכותרת (h1, h2 וכו').

זוהי פעולה שגויה. לתגי הכותרת יש משמעות רבה מבחינת קידום אתרים ותוכנות עזר (הקראה, תוכן ענינים וכו'). במקרים אלה רצוי לקבוע את גודל הכותרת ולהגדירה:

<style type="text/css"
body {font-size: 62.5%;}
h1 {
     font-size: 4em;
     }
h2 {
     font-size: 3em;
     }
</style>

עבור אל הדף הבא, להמשך מאפייני הגופן

אל השיעור הקודם אל השיעור הבא