עיצוב פונטים | CSS

[מוטי אורן]

מדריך לעיצוב פונטים באמצעות שפת CSS

--

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

השימוש בתכונה נראה כך:

p { font-family: font1 font2 font3; }

קיימים הרבה סוגי פונטים, לא נתעכב על זה כאן.

ב – CSS3 ניתן גם לגרום לדפדפן ה – client לקבל את הפונט מהשרת. בשביל כך משתמשים ב – rule שנקרא font-face:

@font-face {
  font-family: fontName;
  src: url(./fonts/font.ttf);
}

בדוגמה הזאת הגדרנו שהשם של הפונט יהיה fontName, והוא יילקח מהמיקום /fonts/font.ttf.

בכדי להשתמש בפונט שהגדרנו, פשוט נכתוב את שמו ב – font-family, כדלהלן:

p { font-family: fontName; }

בכדי להגדיר פונט מוטה, נשתמש בתכונה font-style.

p { font-style: italic; }

כאן הגדרנו שה – style של הפונט יהיה italic דהיינו – מוטה.

ניתן להגדיר שהפונט יהיה רגיל, באמצעות הערך normal:

p { font-style: normal; }

ניתן להגדיר את משקל הפונט (מודגש) על ידי התכונה font-weight:

p { font-weight: bold; }

גם כאן ניתן להגדיר normal.

את גודל הפונט נגדיר באמצעות התכונה font-size:

p { font-size: 2em; }

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

אפשר לקצר את את כל תכונות הפונט לתכונת פונט אחת:

p { font: italic bold 2em fontName1; }