בעוד תמונות לקבל הרבה אהבה כאשר מדובר באתרי אינטרנט, היא מילה הכתובה כי פונה מנועי החיפוש ומבצע הלאה את התוכן של רוב האתרים. ככזה, עיצוב טיפוגרפי הוא חלק חשוב ביותר של עיצוב אתר. עם חשיבות הטקסט של האתר מגיע הצורך להבטיח כי זה נראה טוב וקל לקריאה. זה נעשה עם CSS (גיליונות סגנון מדורגים) סטיילינג.
בעקבות תקן עיצוב מודרני, כאשר אתה רוצה להכתיב את המראה של תוכן הטקסט של האתר, אתה תעשה זאת באמצעות CSS. זה מפריד את סגנון CSS ממבנה HTML של דף. לדוגמה, אם אתה רוצה להגדיר את הגופן של הדף ל- Arial, תוכל לעשות זאת על-ידי הוספת כלל הסגנון הבא ל- CSS שלך (הדבר עשוי להיעשות בגיליון סגנונות CSS חיצוני שמפעיל את הסגנונות עבור כל דף באתר):
body {
font-family: Arial;
}
גופן זה מוגדר עבור "גוף", כך מפל מפלסטיק ישים את הסגנון על כל האלמנטים האחרים של הדף. הסיבה לכך היא כי כל אלמנט HTML אחר הוא ילד של אלמנט "הגוף", סגנונות CSS כמו משפחת גופן או צבע יהיה מפל של ההורה אל האלמנט הילד. זה יהיה המקרה, אלא אם כן נוסף סגנון ספציפי יותר עבור אלמנטים מסוימים. הבעיה היחידה עם CSS זה היא שצוין רק גופן בודד. אם לא ניתן למצוא את הגופן מסיבה כלשהי, הדפדפן יחליף מקום אחר במקומו. זה רע כי אין לך שליטה על איזה גופן משמש; הדפדפן יבחר בשבילך, ואתה אולי לא אוהב את מה שהוא החליט להשתמש! זה המקום שבו מחסנית גופן נכנס. ערימת גופן היא רשימה של גופנים בהצהרת משפחת גופן CSS. הגופנים מפורטים לפי סדר העדפה שאתה רוצה שהם יופיעו באתר במקרה של בעיה כמו גופן לא נטען. ערימת גופן מאפשרת למעצב לשלוט במראה הגופנים בדף האינטרנט, גם אם אין במחשב את הגופן הראשוני אליו התקשרת. אז איך נראית ערימת גופן? הנה דוגמה: body {
משפחת גופן: ג'ורג'יה, "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 עיצוב טיפוגרפי של האתר ככל האפשר. מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'יררד. ערימות גופן וגופני אינטרנט
