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