האפשרות לשנות את גודל הגופן ב-CSS נמצאת עכשיו בערך הבסיס

Rachel Andrew

תמיכה בדפדפן

  • 127
  • 127
  • 3
  • 16.4

מקור

נכס ה-CSS font-size-adjust נוחת ב-Chrome היום, והופך לחלק מ-Baseline Newly Available. הנכס הזה יכול לעזור לכם למנוע שינוי הפריסה בזמן הטעינה של גופנים חלופיים, ולוודא הקריאוּת של גופנים חלופיים בגופנים קטנים יותר. font-size-adjust הנכס הוא חלק מ- Interop 2024, זה ניצחון נוסף למאמץ לשיפור יכולת הפעולה ההדדית של בפלטפורמת האינטרנט.

הבעיה

כשמשווים בין שני גופנים שהוגדרו באותו גודל, בהתאם לצורה ולגודל מהגליפים, הטקסט המוצג יכול לתפוס שטח שונה מאוד. לדוגמה, ההדגמה הבאה מציגה את הטקסט ב-Verdana וב-Bard, שתיהן מוגדרות ל-16 פיקסלים.

טקסט מוצג בגודל 16px ב-Verdana וב-Bard.

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

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

איך font-size-adjust עוזר

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

שימוש ב-font-size-adjust.

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

שימוש ב-font-size-adjust עם מדד הגופן ברוחב ch.

כדי לראות את כל הערכים האפשריים, מסמכי תיעוד של MDN עבור font-size-adjust.

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