סיכום
במאמר הזה נספק סקירה מפורטת על גופנים חלופיים ועל ממשקי ה-API size-adjust, ascent-override, descent-override ו-line-gap-override. ממשקי ה-API האלה מאפשרים להשתמש בגופנים מקומיים כדי ליצור גופנים חלופיים שתואמים במידת מה או באופן מדויק למימדים של גופן אינטרנט. כך אפשר לצמצם או למנוע שינויים בפריסה שנגרמים כתוצאה מחילופי גופנים.
אם אתם מעדיפים לדלג על קריאת המאמר הזה, הנה כמה כלים שתוכלו להשתמש בהם כדי להתחיל להשתמש בממשקי ה-API האלה באופן מיידי:
כלים של Framework:
- @next/font: החל מ-Next 13,
next/fontמשתמש באופן אוטומטי בשינויים של מדדי הגופן וב-size-adjustכדי לספק גופנים חלופיים תואמים. - @nuxtjs/fontaine: החל מ-Nuxt 3, אפשר להשתמש ב-
nuxt/fontaineכדי ליצור ולהוסיף באופן אוטומטי גופנים חלופיים תואמים לגיליונות הסגנון שבהם משתמשת אפליקציית Nuxt.
כלים שאינם מסגרת:
- Fontaine: ספרייה שמפיקה ומוסיפה באופן אוטומטי גופנים חלופיים שמשתמשים בשינויים של מדדי הגופן מברירת המחדל.
- repo הזה מכיל את השינויים הגורפים של מדדי הגופן לכל הגופנים שמתארחים ב-Google Fonts. אפשר להעתיק את הערכים האלה ולהדביק אותם בגיליונות הסגנון.
רקע
גופן חלופי הוא סוג גופן שמשמש כשסוג הגופן הראשי עדיין לא נטען, או כשחסרים בו גליפים הנחוצים לרינדור תוכן הדף. לדוגמה, הקוד הבא ב-CSS מציין שמשפחת הגופנים sans-serif צריכה לשמש כחלופה לגופן "Roboto".
font-family: "Roboto" , sans-serif;
אפשר להשתמש בגופנים חלופיים כדי להציג טקסט מהר יותר (כלומר, באמצעות font-display: swap). כתוצאה מכך, תוכן הדף קריא ומועיל מוקדם יותר – עם זאת, בעבר הדבר נעשה במחיר של חוסר יציבות בפריסה: שינויי פריסה מתרחשים לעיתים קרובות כשגופן חלופי מוחלף בגופן האינטרנט. עם זאת, ממשקי ה-API החדשים שמפורטים בהמשך יכולים לצמצם את הבעיה הזו או למנוע אותה, כי הם מאפשרים ליצור גופנים חלופיים שמשתמשים באותה כמות מקום כמו הגופנים המקבילים שלהם לאינטרנט.
גופנים חלופיים משופרים
יש שתי גישות אפשריות ליצירת גופנים חלופיים 'משופרים'. הגישה הפשוטה יותר משתמשת רק ב-API של החלפת הערך של מדד הגופן. הגישה המורכבת יותר (אבל היעילה יותר) משתמשת גם ב-API של מדדי הגופן וגם ב-size-adjust. במאמר הזה נסביר על שתי הגישות האלה.
איך פועלות שינויים מברירת המחדל של מדדי הגופן
מבוא
שינויים של מדדי גופן מברירות המחדל מאפשרים לשנות את הגובה של האות העליונה, הגובה של האות התחתונה והרווח בין השורות של גופן:
- Ascent (עלייה) הוא המרחק הרחוק ביותר שבו הגליפים של הגופן מגיעים מעל קו הבסיס.
- Descent (ירידה) הוא המרחק הרחוק ביותר שבו הגליפים של הגופן נמשכים מתחת לקו הבסיס.
- מרווח שורות, שנקרא גם 'רווח קדמי', הוא המרחק בין שורות טקסט עוקבות.