התאמת גודל ב-CSS ל- @font-face

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

Adam Argyle

קחו לדוגמה את ההדגמה הבאה, שבה font-size הוא 64px עקבי, וההבדל היחיד בין כל אחת מהכותרות האלה הוא font-family. הדוגמאות בצד ימין לא הותאמו, והגודל הסופי שלהן לא עקבי. בדוגמאות שבצד שמאל נעשה שימוש ב-size-adjust כדי לוודא ש-64px הוא הגודל הסופי העקבי.

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

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

1. הבדלים בגובה בתוצאות.
2. שינויים חזותיים חדים בתוכן.
3. הזזת אזורי יעד אינטראקטיביים (התפריט הנפתח קופץ!).

איך לשנות את הגודל של גופנים באמצעות size-adjust

מבוא לתחביר:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. יצירת גופן בהתאמה אישית בשם Adjusted Typeface.
2. המערכת משתמשת ב-size-adjust כדי להגדיל כל גליף ל-150% מגודל ברירת המחדל שלו.
3. ההגדרה הזו משפיעה רק על הגופן היחיד שיובאו.

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

h1 {
  font-family: "Adjusted Typeface";
}

הפחתת CLS באמצעות החלפת גופנים בצורה חלקה

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

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

הוספת הערך size-adjust לכלל @font-face מגדירה התאמה גלובלית של גליפים לגופני הגופן. תזמון נכון של המעבר יוביל לשינוי חזותי מינימלי, והמעבר יתבצע בצורה חלקה. כדי ליצור החלפה חלקה, אפשר לשנות ידנית או לנסות את המחשבון להתאמת גודל של Malte Ubl.

בתחילת הפוסט הזה, תיקון הבעיה בגודל הגופן בוצע באמצעות ניסוי ושגיאה. size-adjust הוזז בקוד המקור עד שאותה כותרת ב-Cookie וב-Arial הניבה את אותו 64px כמו Press Start 2P באופן טבעי. יישרתי שני גופנים לגודל גופן היעד.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

כיול גופנים

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

אסטרטגיות לצורך כיול של size-adjust:

1. יעד מרוחק:
   התאמת הגופנים המקומיים לגופנים שהורדתם.
2. טירגוט מקומי:
   שינוי הגופנים שהורדתם בהתאם לגופנים המטורגטים המקומיים.

דוגמה 1: יעד מרוחק

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

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

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

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

צורת הגופן של היעד היא גם האופן שבו פועל המחשבון של מלטה. בחרו גופן ב-Google והוא יחשב את האופן שבו ניתן להתאים את הפורמט של ValueTrack כדי להחליף אותו בצורה חלקה. הנה דוגמה ל-CSS של Roboto מהמחשבון, שבו טעון Arial בשם 'Roboto-fallback':

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

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

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

דוגמה 2: טירגוט מקומי

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

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

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

כוונון עדין יותר באמצעות ascent-override,‏ descent-override ו-line-gap-override

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

ascent-override

המתאר ascent-override מגדיר את הגובה מעל הבסיס של הגופן.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

בכותרת האדומה (ללא התאמה) יש רווח מעל האות גדולה A ו-O, והכותרת הכחולה הותאמה כך שגובה המכסה צריך להתאים לתיבה התוחמת הכוללת.

descent-override

המתאר descent-override מגדיר את הגובה מתחת לסף הבסיס של הגופן.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

בכותרת האדומה (ללא התאמה) יש רווח מתחת לקו הבסיס של האותיות D ו-O, בעוד שהכותרת הכחולה הותאמה כך שהאותיות שלה יהיו צמודות לקו הבסיס.

line-gap-override

המתאר line-gap-override מגדיר את מדד המרווח בין השורות של הגופן. זהו המרווח המומלץ בין השורות או הרווח החיצוני המומלץ בגופן.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

בכותרת האדומה (ללא התאמה) אין line-gap-override, למעשה היא ב-0%, בעוד שהכותרת הכחולה הותאמה כלפי מעלה ב-50%, וכך נוצר רווח מעל ומטה לאותיות בהתאם.

סיכום של כל המידע

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

סיכום

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

• CSS Fonts Level 5 spec
• התאמת גודל ב-MDN
• החלפה חלקה של ה-generator של @font-face
• Cumulative Layout Shift (CLS) ב-web.dev
• דרך חדשה לצמצם את ההשפעה של טעינת הגופנים: תיאורי גופנים ב-CSS

תמונה של Kristian Strand ב-Unsplash