cascading style sheets reference
הגדרת פונטים ב-CSS2
ב-CSS1 היתה רק דרך פשוטה להגדיר את הפונט שישמש להציג את הטקסט של אלמנט מסויים. CSS2 מציג את הרעיון של WebFonts שמאפשרים הגדרות פונטים יותר מתוחכמות ע"י מפתחי אתרים. סינתיזת פונטים (דפדפנים יכולים לשנות פונט כדי להתאים להגדרות של המחבר), פונטים שניתנים להורדה, הפיכה הדרגתית של פונטים (הדפדפנים יכולים להשתמש בפונט מקומי בזמן שהם מורידים פונט אחר, ואז הם יכולים להחליף לפונט הזה כאשר הוא סיים את ההורדה).
למה זה כל-כך מסובך?
? אולי אתם תוהים מדוע לא פשוט לתת למפתח להגדיר פונט ע"י שימוש בשמו, ואז להגדיר את המאפיינים (משקל, גודל וכו'). לצערי, אין דרך פשוטה להגדיר את הפונט עפ"י שמו. ויותר חשוב מכך, מה קורה כשהפונט המוגדר אינו זמין? סכימת ההגדרות של הפונטים של CSS2 היא הרבה יותר גמישה, ומאפשרת התאמה קרובה יותר לפונט הרצוי, אפילו כאשר הוא אינו זמין.
כיצד זה עובד?
קיימים שני היבטים בשימוש של פונטים ב-CSS2 . הגדרה ע"י המפתח ובחירה ע"י הדפדפן.
כדי לסייע לבחירה של הדפדפן בפונט, CSS2 מציג את הכלל @font-face שמאפשר למפתחים ליצור תיאור של פונט. הכלל @font-face הוא חלק מדף הסגנון, ועוזר לדפדפן להתאים פונט שברשותו לפונט המבוקש ע"י המפתח.
כלל ה- @font-face מכיל רשימה של מתאר פונטים אחד או יותר font descriptors. אלה יכולים להגדיר משהו פשוט כמו שם הפונט וה- url שלו ועד לרוחב ה- glyphs שלו (הצגה גרפית של התווים).
דוגמא פשוטה של כלל @font-face בפעולה שנלקח מהגדרות CSS2 :
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print">
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
}
H1
{ font-family: "Robson Celtic", serif }
</STYLE>
</HEAD>
<BODY>
<H1> This heading is displayed using Robson Celtic</H1>
</BODY>
</HTML>
כאן הדפדפן ישתמש בפונט שהורד עבור כותרות של רמה 1.
כלל @font-face
כפי שאולי ניחשתם ממה שכבר נאמר, התחביר של כלל ה- @font-face הוא מילת המפתח @font-face, שאחריו קבוצה של מתארים, שכולם מוכלים בתוך סוגריים מסולסלים ומופרדים ע"י נקודה-פסיק.מהדוגמא שלמעלה :
@font-face
{
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
}
מתארי הפונטים בעצמם הם מאוד דומים למאפיינים של הצהרה רגילה, למעשה, רבים מהם הם כמעט זהים.ביסודו, למתאר יש שם, שאחריו נקודתיים, ואז רשימת ערכים המופרדת ע"י פסיקים. הבה נבדוק דוגמא קצת יותר מסובכת, ואז לדון בסוגים השונים של מתארים בפירוט .
@font-face
{
font-family: serif;
src: local("Palatino"),
local("Times New Roman"),
local("New York"),
local("Utopia"),
url("http://somewhere/free/font");
font-weight: 100, 200, 300, 400, 500;
font-style: normal;
font-variant: normal;
font-size: all
}
ניתן להשתמש בכלל זה כחלק ממראה "default" - "ברירת המחדל" של הדפדפן. . זה מרמז על כך שפונטים ממשפחת serif (במיוחד כאשר הם מסוגננים בצורה רגילה, הגדרת המשקל רגילה, וכל גודל פונט שהוא) צריכים להשתמש בפונטים מקומיים שנקראים Palatino, Times New Roman, וכו', ואם הם נכשלים בכך הם צריכים להוריד את הפונט המרוחק, המוגדר ע"י ה-url.
כבר רשמתם את משפחת הפונט, משקל הפונט, סגנון הפונט, גודל הפונט ומשתני הפונט המוכרים. למעשה, כל מאפייני הפונטים שראינו יכולים לשמש כדי לעזור להגדיר פונט בשימוש כללי @font-face. ההבדל הקטן בין מתארי פונטים בכללי @font-face ומאפייני פונטים בהצהרות רגילות הוא זה שהמתארים יכולים להשתמש ברשימת ערכים, כאשר באופן כללי, מאפייני פונטים אינם יכולים.
בנוסף, יש מספר גדול של שמות מתארים אחרים. אלה מתמחים ודורשים קצת הבנה של רעיונות טיפוגרפיים יסודיים. בשל כך זה קצת מעבר לרמת היכולת של מדריך זה. מומלץ לבדוק את הגדרות ה-CSS2, שיש בהם הקדמה טובה לרבים מן הרעיונות החשובים וסקירה מליאה של הסוגים השונים של המתארים.
שלב הבא
CSS2 מאפשר את ההכנסה של תוכן נוצר לתוך מסמך generated content. זהו מאפיין בעל עוצמה לניהול אתר, אך לא בלי המורכבות שלו. בהמשך נבחן זאת.
|
