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

המשך למאפייני הגופן

מאפיין: סוג הגופן

המאפיין font-family קובע את סוג הגופן.

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

התאמת הגופן david לטקסט אנגלי תהיה שגויה כמובן, והתאמת הגופן verdana שהוא נפוץ מאוד באתרים אנגליים, לא תעבוד על טקסטים בעברית.

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

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

רשימת גופנים לבחירה:

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

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

 הערה:

כאשר שם הסוג בנוי מיותר ממילה אחת (Times new Roman למשל), יש לכתוב את השם בתוך מירכאות או גרש בודד.

דוגמא לשימוש במאפיין (כולל ריבוי סוגי גופן):

<style style="text/css">
  p {
      font-family: arial, tahoma, 'times new roman';
     }
</style>
שימוש בגופן שאינו מותקן במחשב

מאפיין ייחודי הוא  @font-familyוהוא מיועד לחיבור הדפדפן אל גופן ייחודי הנמצא במקום אחר. אחת הבעיות של תכונה זו נעוצה בעובדה שאינטרנט אקספלורר תומך בקובצי גופן מסוג eot, בעוד ששאר הדפדפנים תומכים בפורמטים אחרים -  ttf, oft.

מאפיין: סגנון הגופן

כשמדברים ב CSS על סגנון הגופן, הכוונה היא להטייה. למאפיין font-style יש שני ערכים, שניהם דנים בהטייה.

italic: גורם להטיית התו

oblique: גורם להטייה כמעט כמו italic אך מעט פחותה בעוצמתה. הערך הזה לא נפוץ במיוחד

מאפיין: עובי (הדגשת) הגופן

המאפיין font-weight קובע את מידת עובי הגופן.

למאפיין זה יש ערכים טקסטואלים ומספריים:

הערכים הטקסטואלים משתנים בין:

normal: גופן רגיל

bold: עבה

bolder: עבה יותר

light: דק מהרגיל

lighter: דק מאוד

הערכים המספריים משתנים בין 100-900 (בקפיצות של 100). הערך 100 הוא הדק ביותר, 400 זהה ל normal, ו-700 הוא bold.

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

המאפיין font-variant יודע להפוך את כל התווים הקטנים לאות גדולה (Cpital Letters).

הערה: האות שהוא מציג קטנה יותר מאותיות caps שנכתבו במקור.

הערך להפעלת המאפיין הוא: small-caps

 דוגמא:

<p style="font-variant:small-caps;">we are nice people, WE ARE NICE PEOPLE</p>

והתוצאה מדגימה את השוני בגודל. שני המשפטים כתובים אמנם ב"אות גדולה", אך מידתן שונה.

we are nice people, WE ARE NICE PEOPLE

 ריכוז מאפיינים פקודה אחת

המאפיין font יכול להציג ריכוז של ערכים בשורה אחת.

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

<p style="font: 40px arial ;">א. אנחנו בני אדם טובים</p>
<p style="font: italic bold 42px 'times new roman' ;">ב. אנחנו בני אדם טובים</p>

אנחנו בני אדם טובים

אנחנו בני אדם טובים

 

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