שימוש ב - font-face@ ב -  CSS3?

באבמצעות font-face@ ביכולתנו להגדיר קישור לפונטים במיקום ספציפי באתר שלנו או בכל מקום אחר באינטרנט. תכונה זו מאפשרת למעצבי אתרים להתאים לאלמנטים השונים בדפים שהם מעצבים את הפונטים שהם חושבים שראוי שיהיו להם ולא לצמצם את בחירתם לקבוצת פונטים שהם יודעים שנמצאים בכל פלטפורמה שממנה יצפו בדפים שהם מעצבים.

למעשה השימוש ב - font-face@ פירושו חופש פעולה למעצבים ושבירת המגבלה על בחירת פונטים. חשבו על המשמעות של החופש לבחור פונט ללא מגבלות: למשל, באתרים בעברית נפסיק לראות את הפונט Arial ונתחיל לראות פונטים יפים ומעוצבים יותר שהותאמו במיוחד לעברית ולשימושים בעברית על ידי מעצבי פונטים דוברי עברית.

הצורה הכללית לשימוש ב - font-face@ היא:

@font-face {
font-family: MyFonts;
src: url(http://Domain.com/fonts/myfonts.ttf);
}

p { font-family: myfonts, Arial; }


הגדרת קישור לפונט באמצעות התכונה font-face@ יש למקם בראש דף ה - CSS שלנו לפני שאנו קוראים לפונט זה עבור אלמנט כלשהו. אם נעשה שימוש בפונט שהוגדר באמצעות font-face@ לפני שהגדרנו מניין על הדפדפן להורידו, הדפדפן יתעלם ממנו. בדוגמה למעלה הגדרנו קודם כל את הקישור לפונט MyFonts ורק לאחר מכן הגדרנו שפונט זה יהיה פונט ברירת המחדל עבור כל האלמנטים מסוג <p>.

הערה: נא שימו לב שממש כמו בגרסאות CSS קודמות ניתן להגדיר לאלמנט יותר ממשפחת פונטים אחת. עובדה זו תקל עלינו לעבוד כבר עכשיו עם font-face@ משום שבמידה והמשתמש עושה שימוש בדפדפן שאינו תומך בתכונה זו הדפדפן לא יתייחס לשימוש שלנו ב - font-face@ ובשעה שנשתמש בפונט שהגדרנו באופן זה הוא יתעלם מן הפונט ויציג את הטקסט שלנו באמצעות פונטים אחרים שנגדיר לו. בדוגמה למעלה במידה ודפדפן שאינו תומך בתכונה font-face@ יציג את הדף שלנו הוא ישתמש עבור האלמנט מסוג <p> בפונט Arial.

שימוש בערך local לצורך הגדרת קישור מקומי לפונט

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

דוגמת קוד לשימוש בערך local בעת הגדרת קישור לפונטים

@font-face {
font-family: MyFont;
src: url('http://Domain.com/fonts/myfonts.ttf');{
src: local('fontname'), url(http://Domain.com/fonts/myfonts.ttf);
{

הגדרת פורמט לפונט שלנו כחלק מהגדרת font-face@

כחלק מהגדרת הקישור לפונט שלנו ביכולתנו לספק לדפדפן גם את הפורמט של הפונט. בדוגמה הבאה נגדיר פורמט לפונטים שלנו:

/* load WOFF font if possible, otherwise use OpenType font */
@font-face {
font-family: MyFonts;
src: url(sans-serif.woff) format("woff"),
}

טבלת הפורמטים המקובלים לפונטים

סיומות קבצים מקובלות פורמט מחרוזת להגדרת הפורמט
woff. WOFF - Web Open Font Format "woff"
ttf. TrueType "truetype"
ttf. otf. OpenType "opentype"
eot. Embedded OpenType "embedded-opentype"
svg. svgz. SVG Font "svg"

הגדרת פונטים בעלי תכונות מיוחדות כפונט מוטה ופונט מודגש

חשוב לדעת שבמידה ובחרתם להשתמש ב - web font ולהגדירו באמצעות font-face@ עליכם להגדיר קישורי פונט גם לטקסט מוטה ולטקסט מודגש ולא הדפדפן לא יידע מה עליו לעשות כאשר תגדירו לו סוגי טקסט מודגש ומוטה. כדי להגדיר פונטים למצבים אלה נשתמש בתכונות font-style ו - font-weight.

דוגמה להגדרת פונט, פונט מוטה ופונט מודגש

@font-face {
font-family: MyFonts;
src: local(''), url('fonts/myfonts.ttf'); format: "truetype";}

@font-face {
font-family: MyFonts;
font-style: italic;
src: local(''), url('fonts/myitalicfonts.ttf'); format: "truetype";}

@font-face {
font-family: MyFonts;
font-weight: bold;
src: local(''), url('fonts/myboldfonts.ttf'); format: "truetype";}

 


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש