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

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

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

שלבי ההטמעה

1. חובה: צריך להחיל את font-size-adjust על רכיבים שבהם העקביות של הגופן היא קריטית, כמו קונטיינרים שמשתמשים בגופני אינטרנט או בלוקים עם משפחות גופנים מעורבות.
2. חובה: משתמשים במילת המפתח from-font ברכיבים כדי להתאים באופן אוטומטי את גודל הגופן ברכיבים בתצוגת עץ לפרופורציות של הגופן הראשי.
3. חובה: צריך להשתמש בערך מספרי ספציפי של יחס גובה-רוחב חלופי בשביל font-size-adjust (למשל, font-size-adjust: 0.5) כדי לנרמל את הפרופורציות באופן עצמאי כשפרופורציות הגופן שעליהן מתבססים הן מעיצובים שונים.

דוגמה: נרמול אוטומטי של גובה האות x

השימוש ב-from-font הוא הגישה הכי יעילה. היא מחלצת את יחס הגובה-רוחב של גובה ה-x מהגופן הזמין הראשון ומחילה אותו על גופנים ברכיבי צאצא.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

דוגמה: ציון גובה x ספציפי

אם הגופן שרוצים להתאים הוא לא צאצא של הגופן שעליו מבוסס הגודל, צריך לציין ערך להתאמת גובה ה-x.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

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

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

• אפשר להשתמש ב-@supports not (font-size-adjust: from-font) כדי לזהות תמיכה ב-font-size-adjust ולספק סגנונות חלופיים (למשל, גובה שורה או גודל גופן מותאמים).
• בחרו גופנים עם גובה x דומה לזה של הגופן הראשי.
• אפשר להחיל שינויים ספציפיים של font-size ו-line-height על משפחות גופנים חלופיות ומשפחות גופנים בתצוגת עץ.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}