חלופות משופרות של גופן

Katie Hempenius
Katie Hempenius
X

סיכום

במאמר הזה נספק סקירה מפורטת על גופנים חלופיים ועל ממשקי ה-API size-adjust,‏ ascent-override,‏ descent-override ו-line-gap-override. ממשקי ה-API האלה מאפשרים להשתמש בגופנים מקומיים כדי ליצור גופנים חלופיים שתואמים במידת מה או באופן מדויק למימדים של גופן אינטרנט. כך אפשר לצמצם או למנוע שינויים בפריסה שנגרמים כתוצאה מחילופי גופנים.

אם אתם מעדיפים לדלג על קריאת המאמר הזה, ריכזנו כאן כמה כלים שבעזרתם תוכלו להתחיל להשתמש בממשקי ה-API האלה באופן מיידי:

כלים של Framework:

  • ‎@next/font: החל מ-Next 13, next/font משתמש באופן אוטומטי בשינויים של מדדי הגופן וב-size-adjust כדי לספק גופנים חלופיים תואמים.
  • @nuxtjs/fontaine: החל מגרסה 3 ב-Next, אפשר להשתמש ב-nuxt/fontaine כדי ליצור ולהוסיף באופן אוטומטי חלופות לגופנים תואמים לגיליונות הסגנון שבהם משתמשת אפליקציית Nuxt.

כלים שאינם מסגרת:

  • Fontaine: Fontaine היא ספרייה שיוצרת ומוסיפה באופן אוטומטי גופנים חלופיים שמשתמשים בשינויים של מדדי הגופן מברירת המחדל.
  • המאגר הזה מכיל את השינויים הגורפים של מדדי הגופן לכל הגופנים שמתארחים ב-Google Fonts. אפשר להעתיק את הערכים האלה ולהדביק אותם בגיליונות הסגנונות.

רקע

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

font-family: "Roboto" , sans-serif;

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

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

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

איך פועלות החלפות של מדדי גופנים

מבוא

שינויים של מדדי הגופן מברירות המחדל מאפשרים לשנות את הגובה של האות העליונה, הגובה של האות התחתונה והרווח בין השורות של גופן:

  • Ascent (עלייה) הוא המרחק הרחוק ביותר שבו הגליפים של הגופן מתנשאים מעל קו הבסיס.
  • Descent (ירידה) הוא המרחק הרחוק ביותר שבו הגליפים של הגופן נמשכים מתחת לקו הבסיס.
  • מרווח שורות, שנקרא גם 'רווח קדמי', הוא המרחק בין שורות טקסט עוקבות.

תרשים של עלייה, ירידה ופער בין גופן.

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

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

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

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

חישוב של שינויים בערכי הגופן

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

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

לדוגמה, אלה השינויים האלה של מדדי הגופן לגופן Poppins:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

הערכים של ascent,‏ descent,‏ line-gap ו-unitsPerEm מגיעים כולם מהמטא-נתונים של גופן האינטרנט. בקטע הבא במאמר הזה נסביר איך להשיג את הערכים האלה.

קריאת טבלאות של גופנים

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

צילום מסך של תיבת הדו-שיח Font Information ב-FontForge. בתיבת הדו-שיח מוצגים מדדי גופן כמו 'עלייה של גופן', 'ירידה של גופן' ו'מרווח שורה של גופן'.
שימוש ב-FontForge להצגת מטא-נתונים של גופנים

ריכזנו כאן כמה כלים שאפשר להשתמש בהם כדי לקרוא את המטא-נתונים של גופן:

  • fontkit הוא מנוע גופנים שנוצר עבור Node.js. קטע הקוד הזה מראה איך להשתמש ב-fontkit כדי לחשב שינויים מברירת המחדל של מדדי הגופן.
  • Capsize היא ספרייה לבחירת גודל וגופן. Capsize מספק ממשק API לקבלת מידע על מדדים שונים של גופנים.
  • fontdrop.info הוא אתר שמאפשר לכם להציג טבלאות גופנים ומידע נוסף שקשור לגופנים מהדפדפן.
  • Font Forge הוא עורך גופנים פופולרי למחשב. כדי להציג את ascent,‏ descent ו-line-gap: פותחים את תיבת הדו-שיח Font Info, בוחרים בתפריט OS/2 ואז בכרטיסייה Metrics. כדי להציג את UPM: פותחים את תיבת הדו-שיח Font Info ובוחרים בתפריט General.

הסבר על טבלאות גופנים

יכול להיות שתבחינו בהתייחסות למושגים כמו 'עלייה' במספר מדדים. לדוגמה, יש מדדים 'hheaAscent', 'typoAscent' ו-winAscent. הסיבה לכך היא שמערכות הפעלה שונות משתמשות בגישות שונות לעיבוד גופנים: בדרך כלל, תוכנות במכשירי OSX משתמשות במדדי גופנים מסוג hhea*, ואילו תוכנות במכשירי Windows משתמשות בדרך כלל במדדי גופנים מסוג typo* (שנקראים גם sTypo*) או win*.

בהתאם לגופן, לדפדפן ולמערכת ההפעלה, הגופן יומר באמצעות המדדים hhea,‏ typo או win.

Mac Windows
Chromium משתמש במדדים מהטבלה 'hhea'. המערכת משתמשת במדדים מהטבלה typo אם ההגדרה USE_TYPO_METRICS מוגדרת, אחרת היא משתמשת במדדים מהטבלה win.
Firefox המערכת משתמשת במדדים מהטבלה typo אם הוגדר הערך USE_TYPO_METRICS, אחרת היא משתמשת במדדים מהטבלה hhea. המערכת משתמשת במדדים מהטבלה typo אם ההגדרה USE_TYPO_METRICS מוגדרת, אחרת היא משתמשת במדדים מהטבלה win.
Safari משתמש במדדים מהטבלה 'hhea'. המערכת משתמשת במדדים מהטבלה typo אם ההגדרה USE_TYPO_METRICS מוגדרת, אחרת היא משתמשת במדדים מהטבלה win.

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

תאימות למכשירים שונים

ברוב הגופנים (לדוגמה, כ-90% מהגופנים שמתארחים ב-Google Fonts), אפשר להשתמש בצורה בטוחה בשינוי של מדדי הגופנים בלי לדעת מה מערכת ההפעלה של המשתמש. כלומר, עבור הגופנים האלה, הערכים של ascent-override, descent-override ו-linegap-override נשארים בדיוק זהים, גם אם לא חלים המדדים hhea, typo או win. המאגר הזה מספק מידע על הגופנים שההנחיה הזו חלה עליהם ועל אילו גופנים.

אם אתם משתמשים בגופן שדורש שימוש בקבוצות נפרדות של עקיפות של מדדי גופן למכשירי OSX ולמכשירי Windows, מומלץ להשתמש בעקיפות של מדדי גופן וב-size-adjust רק אם יש לכם אפשרות לשנות את גיליונות הסגנון בהתאם למערכת ההפעלה של המשתמש.

שימוש בעקיפות של מדדי גופן

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

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

איך פועלת התכונה 'התאמת גודל'

מבוא

מתאר ה-CSS size-adjust משנה באופן יחסי את הרוחב והגובה של גליפי הגופן. לדוגמה, size-adjust: 200% משנה את הגודל של גליפי הגופן לשניים מגודלם המקורי, ו-size-adjust: 50% משנה את הגודל של גליפי הגופן לחצי מגודלם המקורי.

תרשים שבו מוצגות התוצאות של השימוש ב-'size-adjust: 50%' וב-'size-adjust: 200%'.

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

כך משתמשים ב-size-adjust בגיליונות סגנונות:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

בגלל אופן החישוב של size-adjust (שמוסבר בקטע הבא), הערך של size-adjust (והעקומות של מדדי הגופן המתאימים) משתנה בהתאם לגופן החלופי שבו נעשה שימוש:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

חישוב שינויים שמוגדרים מראש במדדי הגופן והגודל

אלה המשוואות לחישוב שינויים מברירת המחדל של size-adjust ושל מדדי הגופן:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

אפשר לקרוא את רוב הקלט הזה (כלומר, ascent,‏ descent ו-line-gap) ישירות מהמטא-נתונים של גופן האינטרנט. עם זאת, צריך לבצע הערכה של avgCharacterWidth.

רוחב תווים ממוצע משוער

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

דוגמה לגישה נאיבית לחישוב avgCharacterWidth היא לקחת את הרוחב הממוצע של כל [a-z\s] התווים.

תרשים שמציג השוואה בין רוחב הגליפים הנפרדים של Roboto‏ [a-zs].
רוחב הגליפים של Roboto

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

גישה מורכבת יותר שמשפרת את הדיוק היא להביא בחשבון את תדירות האותיות, ובמקום זאת לחשב את רוחב הממוצע המשוקלל לפי תדירות של תווים [a-z\s]. המאמר הזה הוא מקור מידע טוב לגבי תדירות האותיות ואורך המילה הממוצע בטקסטים באנגלית.

תרשים שבו מוצגת תדירות של אותיות באנגלית.
תדירות האותיות באנגלית

בחירת גישה

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

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

  • מצד שני, אם רוצים לקבל דיוק רב יותר ומוכנים להשקיע יותר עבודה ובדיקות, שילוב של size-adjust הוא גישה טובה לשימוש. אם תיושם בצורה נכונה, גישה זו תוכל למנוע ביעילות שינויי פריסה הקשורים לגופנים.

בחירת גופנים חלופיים

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

Arial הוא גופן החלופי המומלץ לגופנים מסוג Sans-serif, ו-Times New Roman הוא גופן החלופי המומלץ לגופנים מסוג Serif. עם זאת, אף אחד מהגופנים האלה לא זמין ב-Android (Roboto הוא גופן המערכת היחיד ב-Android).

בדוגמה הבאה נעשה שימוש בשלושה גופנים חלופיים כדי להבטיח כיסוי רחב של מכשירים: גופן חלופי שמטרגט מכשירי Windows/‏Mac, גופן חלופי שמטרגט מכשירי Android וגופן חלופי שמשתמש במשפחת גופנים גנרית.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

בקשה לקבלת משוב

נשמח לקבל ממך משוב על חווית השימוש בשינויים של מדדי גופנים וsize-adjust.