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

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

כדאי לעיין בדוגמה הבאה, שבה השדה 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');
}

כיול גופנים

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

אסטרטגיות לצורך כיול של 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";
}

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

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

גם המחשבון של Malte פועל כך, כשהוא מגדיר גופן של המותג כיעד. בוחרים גופן של Google, והמערכת תחשב איך לשנות את Arial כדי להחליף אותו בצורה חלקה. הנה דוגמה ל-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