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

Katie Hempenius
Katie Hempenius
X

סיכום

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

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

כלים של framework:

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

כלים שהם לא framework:

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

רקע

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

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

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

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

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

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

פתיח

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

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

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

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

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

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. בתיבת הדו-שיח מוצגים מדדי גופנים כמו 'Typo Ascent', 'Typo Descent' ו-'Typo Line Gap'.
שימוש ב-FontForge להצגת מטא-נתונים של גופנים

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

  • fontkit הוא מנוע גופנים שמיועד ל-Node.js. קטע הקוד הזה מראה איך להשתמש ב-fontkit כדי לחשב שינויים של מדדי גופנים.
  • גודל גופנים – ספריית פריסה וגודל גופן. האפשרות 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 נעשה שימוש במדדים מהטבלה 'hea'. המערכת תשתמש במדדים מהטבלה typo אם הוגדר הערך USE_TYPO_METRICS. אחרת, המערכת תשתמש במדדים מהטבלה 'win'.
Firefox המערכת תשתמש במדדים מהטבלה typo אם הוגדר הערך USE_TYPO_METRICS. אחרת, המערכת תשתמש במדדים מהטבלה 'hea'. המערכת תשתמש במדדים מהטבלה typo אם הוגדר הערך USE_TYPO_METRICS. אחרת, המערכת תשתמש במדדים מהטבלה 'win'.
Safari נעשה שימוש במדדים מהטבלה 'hea'. המערכת תשתמש במדדים מהטבלה 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)

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

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

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

דוגמה לגישה נאיבית לחישוב 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.