עיצוב טיפוגרפי הוא קטע חשוב מאין כמוהו בעיצוב אתרים מצליח. יצירת אתרים עם טקסט קל לקריאה ואשר נראה נהדר היא המטרה של כל איש מקצוע בתחום עיצוב אתרים. כדי להשיג זאת, יהיה עליך להיות מסוגל להגדיר את הגופנים הספציפיים שבהם ברצונך להשתמש בדפי האינטרנט שלך. כדי לציין את הגופן או את משפחת הגופנים במסמכי האינטרנט שלך, תשתמש במאפיין בסגנון גופן-משפחתי CSS.
הסגנון הגופני-משפחתי הכי לא פשוט שתוכל להשתמש בו יכלול רק משפחת גופנים אחת:
p {
משפחת גופנים: אריאל;
}
אם החלת סגנון זה על דף, כל הפסקאות יוצגו במשפחת הגופנים "Arial". זה נהדר ומכיוון ש- "Arial" הוא מה שמכונה "גופן בטוח באינטרנט", כלומר רוב (אם לא כולם) מחשבים יתקינו אותו, אתה יכול להיות רגוע בידיעה שהדף שלך יוצג בכוונה גוֹפָן.
אז מה קורה אם לא ניתן למצוא את הגופן שתבחר? לדוגמא, אם אינך משתמש ב"גופן הבטוח באינטרנט "בדף, מה עושה סוכן המשתמשים אם אין לו את הגופן הזה? הם מבצעים חילוף.
זה יכול לגרום לכמה עמודים משעשעים למראה. פעם נכנסתי לדף שבו המחשב שלי הציג אותו לחלוטין ב"כנפיים "(ערכת אייקונים) מכיוון שלמחשב שלי לא היה את הגופן שהמפתח ציין, והדפדפן שלי בחר בחירה תהומית באיזה גופן הוא ישתמש תַחֲלִיף. הדף היה בלתי קריא עבורי לחלוטין! זה המקום שבו ערימת גופנים נכנסת לתמונה.
הפרד משפחות גופנים מרובות עם פסיק בערימת גופנים
"ערימת גופנים" היא רשימה של גופנים שבהם אתה רוצה שהדף שלך ישתמש. היית שם את אפשרויות הגופנים לפי סדר ההעדפות שלך ומפריד כל אחת בפסיק. אם לדפדפן אין את משפחת הגופנים הראשונה ברשימה, הוא ינסה את השני ואז את השלישי וכן הלאה עד שהוא ימצא אחד שיש לו במערכת.
משפחת גופנים: פוסיקט, אלג'יראי, ברודווי;
בדוגמה שלעיל, הדפדפן יחפש תחילה את הגופן "Pussycat", ואז "Algerian" ואז "Broadway" אם לא נמצא אף אחד מהגופנים האחרים. זה נותן לך יותר סיכוי שלפחות אחד מהגופנים שבחרת ישמש. זה לא מושלם, ולכן יש לנו עוד יותר שנוכל להוסיף למחסנית הגופנים שלנו (המשך לקרוא!).
השתמש בגופנים גנריים אחרונים
אז אתה יכול ליצור ערימת גופנים עם רשימת גופנים ועדיין לא תוכל למצוא אף אחד מהם בדפדפן. אתה לא רוצה שהדף שלך יופיע בלתי קריא אם הדפדפן יבחר בחילוף חלופי. למרבה המזל ל- CSS יש פיתרון גם לזה, והוא נקרא גופנים כלליים.
עליך לסיים תמיד את רשימת הגופנים שלך (גם אם מדובר ברשימה של משפחה אחת או רק גופנים בטוחים באינטרנט) בגופן כללי. ישנם חמישה שתוכלו להשתמש בהם:
- רָהוּט
- פנטזיה
- מונוספייס
- פונט סאנס סריף
- תָג
ניתן לשנות את שתי הדוגמאות לעיל ל:
משפחת גופנים: Arial, sans-serif;
אוֹ.
משפחת גופנים: פוסיקט, אלג'יראי, ברודווי, פנטזיה;
שמות משפחתיים מסוימים של גופנים הם שתי מילים או יותר
אם משפחת הגופנים בה ברצונך להשתמש היא יותר ממילה אחת, עליך להקיף אותה במרכאות כפולות. בעוד שדפדפנים מסוימים יכולים לקרוא משפחות גופנים ללא מרכאות, יתכנו בעיות אם המרחב הלבן מתמצה או מתעלם ממנו.
משפחת גופנים: "Times New Roman", serif;
בדוגמה זו ניתן לראות כי שם הגופן "טיימס ניו רומן", שהוא רב מילים, מוקף במרכאות. זה אומר לדפדפן שכל שלוש המילים הללו הן חלק מאותו שם גופן, בניגוד לשלושה גופנים שונים עם שמות של מילה אחת.