מדריך CSS מספר 4 - פונטים

שלבים

1. 1

   שלב 1

   נתחיל מעיצוב הטקסט - בעיצוב טקסט בCSS, ניתן להגדיר האם הטקסט יהיה italic, bold וכו'. בכדי לעצב את הטקסט נשתמש בחוקי CSS רגילים, כמו שלמדנו במדריכים הקודמים:
2. 2

   שלב 2

   
   p.normal {font-weight:normal;} p.bold {font-weight:bold;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}

   Normal paragraph.

   Light paragraph.

   Bold paragraph.

   Italic paragraph, italic.

   Oblique paragraph

4. 3

   שלב 3

   
   אלו הדוגמאות השונות של עיצובי הטקסט כפי שיראו בדפדפן.
5. 4

   שלב 4

   כמו כן, תוכלו לשנות גם את הפונט בו אתם משתמשים. קיימים אינספור פונטים שניתן להשתמש בהם, הדרך להשתמש בהם היא כך:
6. 5

   שלב 5

   לא מומלץ להגדיר פונטים על פי פיקסלים מכיוון שזה לא עובד טוב בכל הדפדפנים. אם מסיבה כלשהי תרצו בכל זאת לשנות את הפונטים על פי פיקסלים - עושים זאת כך:
7. 6

   שלב 6

   הדרך המומלצת על פי התקן העולמי היא להשתמש בem במקום בפיקסלים. em זו יחידת מידה אחרת שערך em אחד = 16px. חוק הCSS להגדרת גודל פונט עם em יראה כך:
8. 7

   שלב 7

   h2 {font-size:2.5em;}
9. 8

   שלב 8

   בדוגמא הזו הגדרנו שמה שבתגית h2 יהיה בגודל 2.5em. ומה זה בעצם 2.5em? זה 40px לחלק ב16 = 2.5. בכדי לחשב em בפיקסלים, יש לחלק את מספר הפיקסלים ב16.
10. 9

    שלב 9

    הכל טוב ויפה, אבל זה לא מספיק, עדיין בחלק מהדפדפנים יש עיוותים בגדלי הטקסט כאשר מגדילים ומקטינים אותו. לכן נעשה איזה קומבינה מטורפת ונגדיר בbody גודל פונט באחוזים ואת גודל הפונט של האלמנטים השונים נגדיר בem. כך:
11. 10

    שלב 10

    body {font-size:100%;} h2 {font-size:2.5em;}
12. 11

    שלב 11

    p {font-size:18px;}
13. 12

    שלב 12

    שימו לב שאתם משנים את גדלי הטקסט אין זה אומר שאתם צריכים להפסיק להשתמש בתגיות הh בשביל להגדיר כותרות. זה חשוב מאוד!
14. 13

    שלב 13

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

    This is a paragraph using Arial font.

15. 14

    שלב 14

    
    שימו לב לתצורה של חוק הCSS שהגדרנו (p.ariel), הגדרנו שאנו רוצים לשנות את font-family ולאחר מכן (משמאל לימין) יש את שם הפונט בו אתם רוצים להשתמש (לדוגמא ariel), שם הפונט שהדפדפן ישתמש בו (Helvetica) במקרה שהוא לא יצליח להציג את הפונט הראשון והשם השלישי ברשימה הוא שם של משפחה גנרית (sans-serfi) של פונטים מהם יבחר הדפדפן אקראית אם הוא לא יצליח להציג את השניים האחרים. תוכלו למצוא באינטרנט המון פונטים שונים ומשפחות פונטים. אם שם של פונט הוא יותר ממילה אחת יש לשים אותו בגרשיים.
16. 15

    שלב 15

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