נכס ה-CSS font-size-adjust
נוחת ב-Chrome היום,
והופך לחלק מ-Baseline Newly Available. הנכס הזה יכול לעזור לכם למנוע
שינוי הפריסה בזמן הטעינה של גופנים חלופיים, ולוודא
הקריאוּת של גופנים חלופיים בגופנים קטנים יותר. font-size-adjust
הנכס הוא חלק מ-
Interop 2024,
זה ניצחון נוסף למאמץ לשיפור יכולת הפעולה ההדדית של
בפלטפורמת האינטרנט.
הבעיה
כשמשווים בין שני גופנים שהוגדרו באותו גודל, בהתאם לצורה ולגודל מהגליפים, הטקסט המוצג יכול לתפוס שטח שונה מאוד. לדוגמה, ההדגמה הבאה מציגה את הטקסט ב-Verdana וב-Bard, שתיהן מוגדרות ל-16 פיקסלים.
ההבדל בגודל מחושב על ידי ערך הגובה, הגובה של אותיות קטנות בהשוואה לאותיות רישיות בגופן, משתנה בין הגופנים.
הדבר עלול לגרום לשתי בעיות כאשר נעשה שימוש בגופן עם ערך גובה-רוחב שונה כחלופה. קודם כול, גודל השטח שהגופן תופס ישתנה. שנית, הבחירה בגופן החלופי עשויה להיות פחות קריאה מזו בעיקר בגופנים בגודל קטן. הסיבה לכך היא הגובה היחסי של אותיות קטנות לאותיות רישיות הוא גורם מרכזי קריאוּת.
איך font-size-adjust
עוזר
המאפיין font-size-adjust
מאפשר לשנות את הגופן החלופי לטוב יותר
להתאים לגופן הראשון. בדוגמה הבאה מוצגים שני הגופנים שמוצגים
בעבר, הפעם התבצע שינוי בגופן השני כדי שיתאים לגופן הראשון.
בדוגמה זו נעשה שימוש בערך יחיד, מספר, המתאים את הגופנים באמצעות המאפיין
מדד הגופן שמוגדר כברירת מחדל: ex-height
. זה היחס בין גובה ה-x,
גובה x קטן בגופן בהתאם לגודל הגופן. אפשר גם לציין את הגופן
שבו נעשה שימוש. בדוגמה הבאה, ביצעתי נירמול של הגופנים באמצעות
מילת מפתח אחת (ch-width
), בנוסף למספר.
כדי לראות את כל הערכים האפשריים,
מסמכי תיעוד של MDN עבור font-size-adjust
.
כדאי לבדוק את האתר באמצעות הגופן החלופי ולבדוק אם יש בו
שינוי עם font-size-adjust
יכול לעזור לקוראים שמשתמשים בגופן החלופי
תהיה חוויה טובה יותר, במיוחד עכשיו היא זמינה בכל מקום!