משפחות הגופנים הגנריות ב- CSS

לעיצוב טיפוגרפי תפקיד חשוב בעיצוב אתרים. תוכן טקסט ערוך ומעוצב מסייע לאתר להצליח יותר על ידי יצירת חווית קריאה מהנה וקלה לצריכה. חלק מהמאמצים שלך בעבודה עם סוג יהיה לבחור את הגופנים המתאימים לעיצוב שלך ולאחר מכן להשתמש ב- CSS כדי להוסיף גופנים וסגנונות גופנים לתצוגת הדף. זה נעשה באמצעות מה שמכונה a מחסנית גופנים.

ערימות גופן

כאשר אתה ציין גופן כדי להשתמש בדף אינטרנט, זה השיטה הטובה ביותר לכלול גם אפשרויות חירום במקרה שלא תמצא את בחירת הגופן שלך. אפשרויות החיסרון הללו מוצגות ב מחסנית גופנים. אם הדפדפן לא יכול למצוא את הגופן הראשון שמופיע בערימה, הוא עובר לגופן הבא. הוא ממשיך בתהליך זה עד שהוא מוצא גופן בו הוא יכול להשתמש, או שייגמרו לו הבחירות (ובמקרה זה הוא פשוט בוחר כל גופן מערכת שהוא רוצה). הנה דוגמה לאופן שבו מחסנית גופן תיראה ב- CSS כאשר היא מוחלת על אלמנט "body":

גוף {
משפחת גופנים: ג'ורג'יה, "טיימס ניו רומן", סריף;
}

הגופן ג'ורג'יה מופיע ראשון, אז כברירת מחדל, זה מה שהדף ישתמש בו, אך אם הגופן הזה לא זמין משום מה, הדף יחזור ל"טיימס ניו רומן "

ערימת הגופנים מסתיימת במילה תָג. זהו שם גופני-כללי. במקרה הלא סביר שלאדם אין גרוזיה או Times New Roman במחשב שלהם, האתר ישתמש בכל גופן serif שהוא יכול למצוא. הדפדפן יבחר גופן עבורך, אך לפחות אתה מציע הדרכה כדי שיידע איזה סוג גופן יעבוד הכי טוב בעיצוב.

משפחות גופנים גנריות

שם הגופן הכללי הזמין ב- CSS הוא:

• רָהוּט
• פנטזיה
• מונוספייס
• תָג
• פונט סאנס סריף

אמנם קיימים סיווגים רבים אחרים של גופנים בעיצוב אתרים ובטיפוגרפיה, כולל slab-serif, אותיות שחורות, תצוגה, גראנג 'ועוד, חמשת שמות הגופנים הכלליים הללו הם אלה שהייתם משתמשים בהם בערימת גופנים ב- CSS.

• גופנים קורסיים - לרוב תכונות טופס אותיות דקיקות ומקושטות שנועדו לשכפל טקסט מהודר בכתב יד. הגופנים האלה, בגלל האותיות הדקות והפרחוניות שלהם, אינם מתאימים לגוש תוכן גדול כמו עותק גוף. בדרך כלל משתמשים בגופנים קורסיים לכותרות ולצרכים קצרים יותר של טקסט שניתן להציג בגדלי גופנים גדולים יותר.
• גופני פנטזיה - הם הגופנים המטורפים משהו שלא ממש נכנסים לשום קטגוריה אחרת. גופנים המשכפלים סמלי לוגו ידועים, כמו טופס האותיות מה- הארי פוטר אוֹ בחזרה לעתיד סרטים, נכנסים לקטגוריה זו. גופנים אלה אינם מתאימים לתוכן הגוף מאחר ולעתים קרובות הם מסוגננים כל כך שקשה יותר מדי לעשות קריאת קטעי טקסט ארוכים יותר שנכתבו בגופנים אלה.
• גופני מונוספייס - מציגים טופס אותיות בגודל שווה ומרווח כמו שהיית מוצא במכונת כתיבה ישנה. שלא כמו גופנים אחרים בעלי רוחב משתנה לאותיות בהתאם לגודלם (למשל, רישיות W תופס הרבה יותר מקום מאשר אותיות קטנות אני), גופנים חד-חלליים משתמשים ברוחב קבוע לכל התווים. גופנים אלה משמשים לעיתים קרובות לקריאות קוד מכיוון שהם נראים שונה לחלוטין מטקסט אחר בדף זה.
• גופני Serif - השתמשו בקשירות מעטות נוספות על גבי טפסי האותיות. החלקים הנוספים האלה נקראים serifs. גופני serif נפוצים הם ג'ורג'יה וטיימס ניו רומן. גופני Serif עובדים נהדר עבור טקסט גדול כמו כותרת, כמו גם קטעים ארוכים של טקסט והעתק גוף.
• פונט סאנס סריףגופנים - אין ליגטורות. פירוש השם ללא סריפים. הגופנים הפופולריים בקטגוריה זו כוללים את אריאל או הלווטיקה. בדומה לסריפים, גופנים ללא סריף מופיעים באותה מידה בכותרות ובתוכן הגוף, אם כי חלקם מומחים מעדיפים שגושי טקסט גדולים יימנעו מגופני sans-serif מכיוון שקשה יותר לקרוא אותם בנקודה קטנה גדלים.