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

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

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

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

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

@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";
}

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

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

שימוש בגופן מותג כיעד הוא גם אופן הפעולה של המחשבון של מלטה. בחרו גופן של Google והוא יחשב כיצד להתאים את iTunes כדי להחליף אותו בקלות. הנה דוגמה ל-CSS Roboto מהמחשבון, שבו נטען שם Roboto ונקרא "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: יעד מקומי

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

@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 (האות הגדולה 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 רמה 5
• התאמת גודל ב-MDN
• מחולל חלק של @font-face
• Cumulative Layout Shift (CLS) באתר web.dev
• דרך חדשה לצמצום ההשפעה של טעינת גופנים: מתארי גופנים ב-CSS

צילום של כריסטיאן סטרנד ב-UnFlood