מדריך לעיצוב גופנים (Fonts) בעזרת CSS

אחד ההיבטים החשובים ביותר בעיצובו של כל דף HTML הוא עיצוב הרקע של הדף ושל האלמנטים השונים המרכיבים אותו. בפרק זה נעסוק בדרכים השונות להשפיע על הרקע של דפי HTML ומרכיביהם בעזרת CSS ותכונותיו:

הגדרת סוג הגופן (Font Family)

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

דוגמה להגדרת משפחות של גופנים לאלמנטים שונים
h1 {font-family:"times new roman", times, serif;}
p {font-family:arial, helvetica, "sans serif"}
body {font-family:"courier new", courier, monospace}

נסו בעצמכם   

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

יש לשים לב גם שאת הגופן "times new roman" ואת הגופן "sans serif" ציינו בתוך מרכאות. הסיבה לכך היא ששמות גופנים אלה מורכבים מיותר ממילה אחת. בכל מקרה כזה יש לשים את שם הדופן בתוך מרכאות כפולות.

הגדרת גודל הגופן (Font Size)

שליטה בגודל הטקסט כפי שיוצג על ידי הדפדפן חשובה ביותר לכל מעצב אתרים. CSS מאפשר שליטה זו באמצעות התכונה font-size. תכונה זו יודעת לקבל כערך סוגי שונים של ערכים כמפורט בטבלה הבאה:

סוג ערך הסבר
xx-small מילה שמורה. מורה לדפדפן להקטין את הגופן לגודל אקסטרה אקסטרה קטן.
x-small מילה שמורה. מורה לדפדפן להקטין את גודל הגופן לגודל אקסטרה קטן.
small מילה שמורה. מורה לדפדפן להקטין את הגופן.
medium מילה שמורה. מורה לדפדפן להציג את הגופן בגודל בינוני.
large מילה שמורה. מורה לדלפן להציג גופן גדול.
x-large מילה שמורה. מורה לדפדפן להציג גופן אקסטרה גדול.
xx-large מילה שמורה. מורה לדפדפן להציג גופן אקסטרה אקסטרה גדול.
smaller מילה שמורה. מורה לדפדפן להציג גופן קטן יותר מגודל הגופן המוגדר באלמנט האב של האלמנט שעבורו אנו מגדירים את גודל הגופן.
larger מילה שמורה.מורה לדפדפן להציג  גופן גדול יותר מגודל הגופן המוגדר באלמנט האב של האלמנט שעבורו אנו מגדירים את גודל הגופן.
מידת גודל מידת גודל מספרית קבועה המורה לדפדפן להציג את הפונג בגודל מסוים. בדרך כלל נגדיר מידת גודל בפיקסלים (px) או בסנטימטרים (cm) או במידה הנקראת em. כאשר כל em שווה ל - 16 פיקסלים.
מידה אחוזית מורה לדפדפן להציג  גופן גדול יותר באחוזים מגודל הגופן המוגדר באלמנט האב של האלמנט שעבורו אנו מגדירים את גודל הגופן.
inherit מורה לדפדפן שעליו להציג גופן זהה בגודלו לגופן המוגדר באלמנט האב של האלמנט שאנו מגדירים עבורו את גודל הגופן.

להלן דוגמת קוד לשימוש בתכונה font-size תוך העברת סוגים שונים של ערכים:

body{font-size:1em;}
h1{font-size:xx-large;}
h2{font-size:120%;}

נסו בעצמכם   

הגדרת סגנון הגופן (Font Style)

בעזרת התכונה font-style ניתן להגדיר שני סוגים של נטיית אותיות (italic) וכן אותיות ישרות רגילות. הערכים שתכונה זו יודעת לקבל הם: normal, italic, oblique. תוכלו להתרשם מהשפעת ערכים אלה על דרך הצגת הגופן בדוגמת הקוד הבאה:

#p1{font-style:normal;}
#p2{font-style:italic;}
#p3{font-style:oblique;}

נסו בעצמכם   

Font Variant

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

דוגמה לשימוש במילים שמורות לצורך קביעת מיקום תמונת הרקע
h3 {font-variant:small-caps;}

נסו בעצמכם   

הגדרת משקל הגופן (Font Weight)

בעזרת התכונה font-weight נגדיר את רמת ההדגשה (bold) של טקסט בדף ה - HTML שלנו. תכונה זו יכולה לקבל ערכים שונים. להלן טבלה ובה פירוט הערכים לתכונה font-weight:

סוג ערך הסבר
normal בקבלו ערך זה הגופן יהיה נורמלי ולא מודגש.
bold בקבלו ערך זה הגופן יהיה מודגש.
bolder בקבלו ערך זה הגופן יהיה עבה יותר ולכן מודגש יותר.
lighter גופן פחות מודגש.
100 - 900 100, 200, 300 = גופן דק יותר מהרגיל.
400 = גופן במצב נורמלי.
500, 600, 700, 800, 900 = גופנים ההולכים ונעשים עבים ומודגשים יותר.

להלן קוד המדגים את הדרכים השונות להעברת ערכים לתכונה font-weight:

#p1{font-weight:200;}
#p2{font-weight:normal;}
#p3{font-weight:bold;}
#p4{font-weight:bolder;}

נסו בעצמכם   


Regiter to our news letter

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש