מדריך CSS3 – הצגת פונטים

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

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

קודם כל – דוגמא – שימו לב לזה!

This is test paragraph.

אתם אמורים לראות פסקה עם פונט שונה לחלוטין מה-arial או ה-verdana הרגילים והמאוסים משהו.
איך עשיתי את הפלא הקטן הזה? פשוט מאד! ראשית, בחרתי פונט – graublau שניתן להורדה ולשימוש באופן חופשי. יש לא מעט פונטים כאלו.

אחרי שהורדתי את הקובץ למחשב שלי, שמתי אותו בתיקית ה-CSS והגדרתי font-face באופן הבא:

@font-face {
    font-family: 'GraublauWebRegular';
    url('graublauweb-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

הקוד די פשוט פה, ראשית הגדרתי את שם משפחת הפונטים ואז פירטתי את שם הקובץ והפורמט שלו (ttf זה truetype ובדרך כלל זה הסוג הנפוץ ברשת, יש גם סוגים נוספים כגון SVG, opentype ו-woff).

אחרי כן, כל מה שנותר לי לעשות זה לציין את שם משפחת הפונטים כרגיל, כאילו הפונט כבר מוגדר אצל המשתמש:

p.test {
	 font-family:GraublauWeb,Verdana, Arial, Helvetica, sans-serif;
}

כמובן שהגדרתי גם שמות אחרים של פונטים שיעבדו אם במקרה הדפדפן של המשתמש לא תומך במודול הזה של CSS3.

שימו לב היטב להשתמש בפונטים חוקיים בלבד – או כאלו שמותרים לשימוש באופן מפורש או כאלו שרכשתם את זכויות היוצרים שלהם לשימוש ברשת. גם בעברית וגם באנגלית יש אתרים שמוכרים זכויות שימוש לפונטים יצירתיים ומקוריים.

כל הדפדפנים המודרניים – פיירפוקס, כרום, ספארי וכמובן אינטרנט אקספלורר מגרסה 9 ומעלה תומכים באפשרות הזו באופן פשוט וחלק. והשאר? אני חושב שמיש משתמש באינטרנט אקספלורר 8 ו-7 (שלא לדבר על הגרוטאה העתיקה אינטרנט אקספלורר 6) יכולים להסתפק ב-arial. אבל גם בשבילם יש האקים שידונו במאמר הבא על הטמעת פונטים באינטרנט אקספלורר.