מדריך CSS – גופנים

תכונות של פונטים (גופנים) נחלקים לשבעה:

Font-family

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

<p style="font-family:'times New Roman', Arial, verdana, 'sans serif';">

font-size

גודל הגופן: את גודל הפונט אפשר להגדיר באופן אבסולוטי או יחסי.

Td{font-size:16pt;}
Td{font-size:150%;}
Td{font-size:medium;}
Td{font-size:+2pt;}
Td{font-size:larger;}

צורת הכיתוב הראשונה, נמצאת בשימוש נפוץ, וקובעת את גודל האותיות לקבוע מסויים. הצורה השניה גם היא קבועה ל1.5 מגודל הגופן שנקבע כברירת מחדל.
הדוגמה השלישית מתייחסת לגודל קבוע שנקבע ע"י הדפדפן וניתן להשתמש בו באחד מהערכים הבאים: xx-small, x-small, small,
medium, large, x-large, וכן xx-large. אלו מותאמים לגדלי הכותרות הנפוצים.<7-1H>. הצורה הרביעית היא הגדלה של הפונט
העכשוי בשני פיקסלים, ואילו הצורה האחרונה, נותנת את הגודל הבא אחרי הגודל הקיים (אם הוגדר small, יקבל האלמנט גודל של medium).

font-style

יכולה לקבל אחד משלושה ערכים: italic, oblique, normal.
Normal הינו כתב רגיל ואילו בין שני האחרים קשה להבדיל, שניהם נטויים.

Font-weight

היא תכונה המאפשרת לעבות את האותיות. ערך ברירת המחדל הוא normal אולם ניתן לתת את הערך bold כדי לקבוע אות עבה או להשתמש בערכים היחסיים bolder או lighter באופן יחסי לאלמנט ההורה. במקום מילים, אפשר להשתמש במספרים: 100 הוא העדין ביותר, 900 הוא המודגש ביותר. 400 הוא הערך הרגיל, ו-700 הוא הערך הקבוע כ-bold.

Line-height

היא גובה שורת האותיות, ומיוצגת באמצעות מידת אורך כמוזכר לעיל. לתכונה זו אפשר לתת ערכים מספריים, אחוזים, או יחסיים (2pt+).

font-variant

נתמכת רק על ידי אקספלורר ויכולה לקבל שני ערכים: normal ו- small-caps. האפשרות האחרונה הופכת את האותיות הכתובות לאותיות גדולות (מa לA).

font-stretch

תכונה אחרת ופחות מוכרת (משום שרוב הדפדפנים אינם תומכים בה עדיין) היא font-stretch. תכונה זו מאפשרת להציג את האותיות מכווצות או רחבות לפי בחירתך. ניתן לשים את הערכים:
Ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
Font-size-adjust היא תכונה המעניקה פרופורציה שונה של יחסי רוחב/גובה לאותיות. מה חבל שגם תכונה זו אינה נתמכת על ידי אף אחד מהדפדפנים.

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

P{font-size:14pt;font-family:Arial,Verdana,'sans serif';
font-weight:bold;line-height:16px;}

כדי לעשות זאת באופן חסכוני יותר אפשר להשתמש בתכונה
font כך:

P{font: bold 14pt/16pt Arial,verdana,'sans serif'}

סדר כתיבת הדברים מאוד חשוב:
ראשית יש לציין את הערכים – style, weight, variant .
שנית באים font-size וכן line-height, מופרדים בקו נטוי (slash) /.
לבסוף רשימת סוגי הגופן הרצויים.
מבין כל התכונות גודל הגופן (font-size) וכן משפחות הגופן (font-family) חייבים להיות בהגדרת תכונות font.

P{font:12pt 'times new roman',serif, Paris;}
Em{font:italic bolder +6pt/+10pt Courier,Monospace;}

גם הגדרות אלה יתקבלו ויתבצעו.