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

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

Adam Argyle

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

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

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

Browser Support

• 92
• 92
• 92
• 17

Source

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

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

מונח מפתח: משפחת גופנים לעומת גופן: גופן נקרא על שם משפחת הגופנים שלו בתוספת סגנון הגופן. ‫Helvetica Bold מתייחס למשפחת הגופנים המודגשת הספציפית, ו-Helvetica מתייחס באופן כללי לכל המשפחה של יותר מ-8 משפחות גופנים (רגיל, מודגש, נטוי וכו'). ב-CSS @font-face תתעסקו עם משפחות גופנים, למרות שכדי להשתמש בהן צריך לכתוב font-family.

איך משנים את גודל הגופנים באמצעות 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";
}

אזהרה: אם הכותרת השנייה בהדגמה שלמעלה לא גדולה יותר מהכותרת הראשונה, הדפדפן שלכם לא תומך ב-size-adjust.

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

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

בדוגמה שמימין יש שינוי פריסה, ובדוגמה שמשמאל אין.

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

ככל שיש יותר תוכן, כך גדל הסיכוי לשינוי פריסה כשמחליפים גופן

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

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

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

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

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

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

• 87
• 87
• 89
• 

Source

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

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

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

descent-override

Browser Support

• 87
• 87
• 89
• 

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

• 87
• 87
• 89
• 

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

• מפרט CSS Fonts Level 5
• Size Adjust on MDN
• Seamless swap @font-face generator
• מדד יציבות חזותית (CLS) ב-web.dev
• דרך חדשה לצמצם את ההשפעה של טעינת גופנים: מתארי גופנים ב-CSS