גופני גיבוי יציבים מבחינה חזותית

תכונות אינטרנט: font-size-adjust

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

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

שלבי ההטמעה

1. זיהוי יחס הגובה-רוחב של הגופן המועדף

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

  • גילוי אוטומטי (מומלץ): משתמשים במילת המפתח from-font כדי לאפשר לדפדפן לחלץ את היחס מהגופן הראשי של האתר.
  • חישוב ידני: אם אתם יודעים את הערך הספציפי (למשל, 0.545 לגופן Verdana), אתם יכולים לספק אותו ישירות כדי לקבל שליטה מדויקת יותר.

2. החלת font-size-adjust על מאגר הטקסט

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

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (אופציונלי) התאמה של מדדים ספציפיים

גובה האות x הוא ברירת המחדל והנפוץ ביותר, אבל אפשר לנרמל לפי מדדים אחרים כמו cap-height (שימושי לכותרות באותיות גדולות בלבד) או ch-width (שימושי לגופנים ברוחב אחיד).

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. אימות היציבות החזותית

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

אסטרטגיות חלופיות

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

כדי לצמצם את התופעה הזו בלי font-size-adjust, אפשר להשתמש במתארים size-adjust,‏ ascent-override ו-descent-override של @font-face כדי להתאים באופן ידני את הגופנים החלופיים, אבל החישוב שלהם מורכב יותר מאשר ערך font-size-adjust יחיד.