נפרדים מאריאל: מדריך CSS3 להצגת פונטים

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

צילום: flickr, cc-by, Son of Groucho

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

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

נפתח בדוגמא

כאן יש לנו דוגמא לפסקה עם פונט שונה לחלוטין מה-arial או ה-verdana הרגילים והמאוסים משהו.

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

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

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

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

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

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

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

הפוסט פורסם לראשונה באתר “אינטרנט ישראל”

רן בר-זיק

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

הגב

7 תגובות על "נפרדים מאריאל: מדריך CSS3 להצגת פונטים"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
רוב
Guest

האם יש פונטים מתקדמים בעברית להורדה חופשית?

אור
Guest

מצטרף לשאלה.. אני לא מכיר אף פונט עברי נורמלי שאפשר לשים ב-CSS3…

קרטמן
Guest

אתה נסיתי את מה שכתבת בכל הדפדפנים, ובכל השפות כדי לראות שזה עובד?

רן בר-זיק
Guest

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

אני מודה שלא יצא לי להשתמש בזה בשפה העברית, אבל אני מניח שלא צריכה להיות בעיה.

KE3
Guest

עובד גם באופרה 11

רמי
Guest

רן, היכן ניתן לרכוש פונטים (חוקיים) בעברית?

אריאל
Guest

לכל השואלים יש את האתר הזה לפונטים בעברית:
http://www.fontbit.co.il

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

נ.ב.: אף אחד לא נפרד ממני אז תחליפו כותרת :-(

wpDiscuz

תגיות לכתבה: