בעוד תמונות לקבל הרבה אהבה כאשר מדובר באתרי אינטרנט, היא המילה הכתובה כי פונה מנועי החיפוש ומבצע הלאה את התוכן של רוב האתרים. ככזה, עיצוב טיפוגרפי הוא חלק חשוב ביותר של עיצוב אתר. עם חשיבות הטקסט של האתר מגיע הצורך להבטיח כי זה נראה טוב וקל לקריאה. זה נעשה עם CSS (גיליונות סגנון מדורגים) סטיילינג.
בעקבות תקן עיצוב מודרני, כאשר אתה רוצה להכתיב את המראה של תוכן הטקסט של האתר, אתה תעשה זאת באמצעות CSS. זה מפריד את סגנון CSS ממבנה HTML של דף. לדוגמה, אם אתה רוצה להגדיר את הגופן של הדף ל- Arial, תוכל לעשות זאת על-ידי הוספת כלל הסגנון הבא ל- CSS שלך (הערה - הדבר עשוי להיעשות בגיליון סגנונות CSS חיצוני שמפעיל את הסגנונות עבור כל דף באתר):
body {font-family: Arial; }גופן זה מוגדר עבור "גוף", כך מפל CSS ישים את הסגנון על כל האלמנטים האחרים של הדף. הסיבה לכך היא כי כל אלמנט HTML אחר הוא ילד של אלמנט "הגוף", סגנונות CSS כמו משפחת גופן או צבע יהיה מפל של ההורה אל האלמנט הילד. זה יהיה המקרה, אלא אם כן נוסף סגנון ספציפי יותר עבור אלמנטים מסוימים. הבעיה היחידה עם CSS זה היא שצוין רק גופן בודד. אם לא ניתן למצוא את הגופן מסיבה כלשהי, הדפדפן יחליף מקום אחר במקומו. זה רע כי אין לך שליטה על מה הגופן משמש - הדפדפן יבחר בשבילך, ואתה לא יכול כמו מה החליט להשתמש! זה המקום שבו מחסנית גופן נכנס.
ערימת גופן היא רשימה של גופנים בהצהרת משפחת גופן CSS. הגופנים מפורטים לפי סדר העדפה שאתה רוצה שהם יופיעו באתר במקרה של בעיה כמו גופן לא נטען. ערימת גופן מאפשרת למעצב לשלוט במראה הגופנים בדף האינטרנט, גם אם אין במחשב את הגופן הראשוני אליו התקשרת.
אז איך נראית ערימת גופן? הנה דוגמא:
גוף {font-family: ג'ורג'יה, "Times New Roman", serif; }יש כמה דברים לשים לב כאן.
ראשית, תראה כי הפרדנו את שמות הגופן השונים בפסיק. בין כל אחד אתה יכול להוסיף כמו גופנים רבים ככל שתרצה, כל עוד הם מופרדים על ידי פסיק. הדפדפן ינסה לטעון את הגופן הראשון שצוין תחילה. אם זה נכשל, זה יהיה לרוץ לאורך הקו מנסה כל גופן עד שהוא מוצא אחד כי הוא יכול להשתמש. בדוגמה זו אנו משתמשים בגופנים בטוחים באינטרנט, ו"גיאורגיה "צפויה להימצא במחשב של המשתמש שמבקר באתר (הערה - הדפדפן נראה במחשב שלך עבור הגופנים שצוינו בדף, כך שהאתר בעצם אומר את המחשב אשר גופנים לטעון מן המערכת שלך). אם מסיבה כלשהי הגופן לא נמצא, הוא ינוע לאורך הערימה ונסה את הגופן הבא שצוין.
במונחים של הגופן הבא, שימו לב איך הוא כתוב בערימה. שמו של "ניו יורק טיימס", הוא עטוף במרכאות כפולות. הסיבה לכך היא כי שם הגופן יש מספר מילים. כל שמות גופנים עם יותר ממילה אחת (Trebuchet MS, Courier New, וכו ') חייב להיות שם במרכאות כפולות, כך שהדפדפן יודע שכל המילים האלה הן חלק משם גופן אחד.
לבסוף, אנו לסיים את מחסנית הגופן עם "serif", שהוא סיווג גופן כללי. במקרה הלא סביר שאף אחד מהגופנים שהזנת בערימה שלך זמין, הדפדפן יהיה במקום למצוא רק גופן, כי לפחות נופל לתוך הסיווג הנכון שבחרת. לדוגמה, אם אתה משתמש בגופני sans-serif כמו Arial ו- Verdana, יותר מסיום ערימת גופן עם הסיווג של "sans-serif" יהיה לפחות לשמור את הגופן במשפחה הכוללת אם יש בעיית עומס. אמנם, זה צריך להיות נדיר מאוד כי הדפדפן לא יכול למצוא את כל הגופנים המפורטים בערימה ויש להשתמש במקום זה סיווג כללי, היא נוהג הטוב ביותר לכלול את זה בכל מקרה רק כדי להיות בטוח כפליים.
ערימות גופן וגופני אינטרנט
אתרי אינטרנט רבים משתמשים כיום בגופני אינטרנט הכלולים באתר יחד עם משאבים אחרים (כמו תמונות האתר, קובץ Javascript וכו ') או מקושרים אל מיקום גופן מחוץ לאתר כגון גופני Google או Typekit. בעוד גופנים אלה צריכים לטעון כי אתה מקשר את הקבצים עצמם, אתה עדיין רוצה להשתמש ערימת גופן כדי לוודא שיש לך שליטה על כל הבעיות שעלולות להתעורר. אותו הדבר נכון גם לגבי גופני "אינטרנט בטוח" שאמורים להיות במחשב של מישהו (שים לב שהגופנים שהשתמשנו בהם כדוגמאות במאמר זה, כולל Arial, Verdana, Georgia ו- Times New Roman, הם כל הגופנים הבטוחים לאינטרנט שאמורים להיות במחשב של אדם). למרות הסבירות של גופן חסר הוא נמוך מאוד, ציון מחסנית גופן יעזור bulletproof עיצוב טיפוגרפי של האתר ככל האפשר.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -8 / 9/17