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

מודול של CSS 3 המאפשר הטמעה פשוטה וקלה של כל פונט שהוא בכל אתר אינטרנט. לא עוד arial!

תקן 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. אבל גם בשבילם יש האקים שידונו במאמר הבא על הטמעת פונטים באינטרנט אקספלורר.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

גלילה לראש העמוד