מהן המשפחות הגנריות הכלליות ב- CSS?

הסיווג הגנרי הגופן זמין לשימוש באתר האינטרנט שלך

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

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

גופן ערימות

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

גוף {font-family: ג'ורג'יה, "Times New Roman", serif; }

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

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

משפחות גופן כללי

שם הגופן הגנרי הזמין ב- CSS הוא:

בעוד ישנם סיווגים רבים אחרים גופן זמין עיצוב אתרים טיפוגרפיה, כולל לוח- serif, blackletter, להציג, גראנג ', ועוד, אלה 5 המפורטים לעיל שמות הגנרית המפורטים הם אלה שבהם היית משתמש ב-מחסנית גופן ב- CSS. מה הם ההבדלים בסיווגים אלה גופן? בואו נסתכל!

גופנים קורסיביים מכילים לעתים קרובות אותיות דקות, מעוטרות, המיועדות לשכפל טקסט מהודר בכתב יד. גופנים אלה, בגלל האותיות הדקות והפרחוניות שלהם, אינם מתאימים לגוש גדול של תוכן כמו עותק של גוף. גופנים Cursive משמשים בדרך כלל עבור כותרות וצרכי ​​טקסט קצרים יותר שניתן להציג בגדלים גדולים יותר של גופנים.

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

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

גופני Serif הם אחד הסיווגים הפופולריים יותר. אלה גופנים שיש להם את הליגטורות הנוספות על האותיות. אלה חתיכות נוספות נקראים "serifs". גופני סריף נפוצים הם ג'ורג'יה וטיימס ניו רומן. גופני Serif ניתן להשתמש עבור טקסט גדול כמו הכותרת, כמו גם מעברים ארוכים של טקסט וגוף להעתיק.

Sans-serif הוא הסיווג הסופי נתבונן. אלה גופנים שאין להם את הליגטורות הנ"ל. השם פירושו "ללא serifs". גופנים פופולריים בקטגוריה זו יהיו Arial או Helvetica. בדומה serifs, sans-serif גופנים ניתן להשתמש באותה מידה גם כותרות כמו גם תוכן הגוף.

מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -10 / 16/17