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

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

Adam Argyle

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

בדוגמה הזו נעשה שימוש בכלי ניפוי הבאגים של פריסת רשת CSS בכלי הפיתוח ל-Chrome כדי להציג את הגבהים.

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

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

  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.

בוחרים גופן אינטרנט של Google ומקבלים קטע קוד @font-face שהותאם מראש.

בתחילת הפוסט הזה, תיקון הבעיה בגודל הגופן נעשה בשיטת הניסוי והטעות. הערך 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

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

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

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

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

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

תמונה מאת Kristian Strand ב-Unsplash