ציון סדרה של משפחות גופן עם נכס גופן משפחתי של CSS

התחביר של נכס גופן משפחתי

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

סגנון משפחת הגופן הפשוט ביותר שניתן להשתמש בו יכלול רק משפחת גופנים אחת:

p {font-family: Arial; }

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

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

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

הפרד משפחות גופן מרובות עם פסיק בערימת גופן

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

משפחת גופן: פוסיקאט, אלג'יריה, ברודווי;

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

השתמש גופנים כללי אחרון

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

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

שתי הדוגמאות לעיל עשויות להשתנות ל:

משפחת גופן: Arial, sans-serif; משפחת גופן: Pussycat, אלג'ירית, ברודווי, פנטזיה;

שמות משפחה מסוימים של גופן הם שתי מילים או יותר

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

font-family: "Times New Roman", serif;

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

מאמר מקורי מאת ג'ניפר קרינין. נערך בתאריך 12/2/16 על ידי ג'רמי ג'יררד