עיצוב גופנים - font-family, font-style, font-size, font-weight

שינוי גופן ב-CSS

סוגי הגופנים הקיימים מחולקים למשפחות לפי הסגנון שלהם. המשפחות העיקריות הן:

• Serif - גופנים שבהם בקצות האותיות יש קווים נוספים שמעטרים את הגופן, כמו למשל Times New Roman.
• Sans-Serif - גופנים שבהם לא קיימת תוספת העיטור הנ"ל כמו למשל Arial.
• Monoscape - גופנים שבהם כל האותיות הן בעלות רוחב זהה, כמו למשל Courier New.

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

שמות של פונטים המורכבים מיותר ממילה אחת ייכתבו במרכאות, כמו למשל "Courier New".

טקסט נטוי

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

הגדרת גודל הפונט והדגשת פונטים

בכדי להגדיר את גודל הפונט בטקסט, משתמשים בתכונה font-size, כאשר הערך נכתב בפיקסלים.

להוספת הדגשה נשתמש בתכונה font-weight שיכולה לקבל ערכים כגון normal או bold. קיימים גם ערכים נוספים או אפשרות להכניס מספר המשקף את עובי הכתב, אבל אלו פחות נפוצים ופחות מומלצים לשימוש.

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

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