ב-Catalina יש גופן מערכת חדש ומאוחד ל-macOS.
הקטע 'system-ui' במפרט של CSS Fonts Module Level 4 מגדיר מילת מפתח בגופן system-ui שמאפשרת למפתחים להשתמש בגופן מערכת ההפעלה המובנה, מותאם לטורבו, מותאם לשוק המקומי, באיכות גבוהה וללא צורך בהורדה, ומוגדר כברירת מחדל בגופן ברירת המחדל של מערכת ההפעלה ישירות באתרים ובאפליקציות שלהם.
body {
font-family: system-ui;
}
הבחירה הזו בפונט דומה למשפט "שימוש בגופן ברירת המחדל של המערכת לפי השפה והאזור הנוכחיים של המשתמש הזה".
ב-macOS, הגופן system-ui הוא San Francisco, גופן שצוות עיצוב בדק, בחן… ועדכן לאחרונה. קודם כול נעבור על תכונות חדשות ומלהיבות של גופנים בקטלינה, ואז נעבור על כמה באגים ונסביר איך המהנדסים של Chromium פתרו אותם.
בפוסט הזה אנחנו יוצאים מנקודת הנחה שאתם כבר מכירים את הגופנים של המשתנים. אם לא, אתם מוזמנים לעבור אל מבוא לגופנים משתנים באינטרנט ואת הסרטון שבהמשך.
תאימות דפדפן
נכון למועד כתיבת המאמר, יש תמיכה ב-system-ui ב-Chromium (מגרסה 56), ב-Edge (מגרסה 79), ב-Safari (מגרסה 11) וב-Firefox (מגרסה 43), אבל עם מילת המפתח -apple-system. לעדכונים, אפשר לעיין במאמר האם אפשר להשתמש בגופנים משתנים?
כוחות חדשים
היכולות החדשות שנוספו לגופן המערכת ב-Catalina זמינות עכשיו למפתחי אינטרנט בגרסה 83 של Chromium. בגופן system-ui יש עכשיו יותר הגדרות משתנות: גודל אופטי ו-2 התאמות משקל ייחודיות:
h1 { font-family: system-ui; font-weight: 700; font-variation-settings: 'wght' 750 ; }
h1 { font-family: system-ui; font-weight: 700; font-variation-settings: 'wght' 750, 'opsz' 20, 'GRAD' 400, 'YAXS' 400 ; }
ב-Mojave, system-ui הוא פונט משתנה עם הגדרות wght בלבד. system-ui ב-Catalina הוא גופן משתנה עם ההגדרות wght, opsz, GRAD ו-YAXS.
נראה לי שיש כאן הזדמנויות נהדרות לעיצוב של שיפורים הדרגתיים. אם רוצים, אפשר להיכנס לעומק לפרטים הקטנים של גופן המערכת.
wght
אפשר להשתמש בערך של עובי גופן בין 0 ל-900, והוא יחול באופן שווה על כל התווים.
/* 0-900 */
font-variation-settings: 'wght' 750;
opsz
התאמה אופטית של הגודל דומה להתאמה בין אותיות או להגדלת רווח בין אותיות, אבל המרווחים נקבעים על ידי עין אנושית במקום על ידי חישובים מתמטיים. הערך 19 ומטה מיועד לריווח של טקסט וגוף, ואילו 20 ומעלה נועד לריווח בין כותרות וכותרות לתצוגה.
/* 19 or 20 */
font-variation-settings: 'opsz' 20;
GRAD
דומה למשקל, אבל ללא מגע ברווחים האופקיים. אפשר להזין בו ערכים בין 400 ל-1000.
/* 400-1000 */
font-variation-settings: 'GRAD' 500;
YAXS
מתיחה של הגליף אנכית. אפשר להזין בו ערכים בין 400 ל-1000.
/* 400-1000 */
font-variation-settings: 'YAXS' 500;
שילוב האפשרויות
באמצעות כמה שורות CSS, אנחנו יכולים לשנות את הגדרות הגופן להדגשה לפי בחירתנו או לנסות שילובים מעניינים אחרים:
font-weight: 700;
font-weight: bold;
font-variation-settings: 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20;
וכך, משתמשי Chromium ב-macOS יראו את המשקל המעודכן והמותאם אישית של 750 עם כמה שינויים קטנים ומהנים אחרים 👍
מגרש משחקים
אפשר ללחוץ על רמיקס לעריכה ב'תקלה' שבהמשך כדי לקבל עותק שניתן לעריכה של התקלה. לאחר מכן, אפשר לערוך את האפשרויות החדשות של font-variation-settings כדי לראות איך זה משפיע על הגופן. חשוב לזכור שהטריק הזה יפעל רק אם אתם משתמשים במכשיר עם מערכת ההפעלה macOS Catalina.
ב-macOS 10.15 נוספו תכונות חדשות לגופן המערכת, וב-macOS 10.15 תועד באג מסובך מסוג system-ui במערכת המעקב אחר באגים של Chromium. האם יש קשר ביניהם?
נספח: הרגרסיה של system-ui
הסיפור הזה מתחיל בבאג אחר: #1005969. הדיווח על הבעיה הזו הגיע לגבי macOS 10.15 כי המרווח בין האותיות ב-system-ui נראה צר וצפוף.
רקע
האם שמתם לב ב-macOS 10.14 שהפסקאות או הכותרות 'נצמדות' לגופן שנראה שונה כשמשנים את הגודל שלהן?
ב-Mojave (macOS 10.14), הגופן system-ui עבר בין שני גופנים בהתאם לגודל הגופן היעד. כשהטקסט היה קטן מ-20px, מערכת macOS השתמשה ב-'San Francisco Text'. כשהטקסט היה 20px ומעלה, macOS השתמשה ב-"San Francisco Display". הגודל האופטי נבנה באופן סטטי לשני גופנים נפרדים.
ב-Catalina (macOS 10.15) הושק גופן משתנה חדש של San Francisco. לא צריך יותר לנהל את 'טקסט' ו'תצוגה'. נוספה לה גם הגדרת הווריאנט החדשה opsz שתיארנו למעלה.
h1 {
font-variation-settings: 'opsz' 20;
}
לצערנו, ערך ברירת המחדל של opsz בגופן החדש של Catalina הוא 20, והמהנדסים של Chromium לא היו מוכנים להחיל את opsz על גופן המערכת. כתוצאה מכך, בגדלים קטנים יותר התמונות מוצגות צרות מדי.
כדי לפתור את הבעיה, היה צריך להחיל את opsz בצורה נכונה על גופן המערכת ב-Chromium. בעקבות זאת, בעיה מס' 1005969 תוקנה. ניצחון! או שזה היה…?
עדיין לא הסתיים
כאן התחיל הקושי: Chromium הפעיל את opsz אבל משהו עדיין לא נראה תקין. לגופנים במערכת ב-Mac יש טבלת גופנים נוספת בשם trak, שמשנה את הריווח האופקי. במהלך העבודה על התיקון, מהנדסי Chromium שמו לב שב-macOS, כשאחזר מדדים אופקיים מאובייקט CTFontRef, המדדים של trak כבר נלקחו בחשבון בתוצאות המדדים. ספריית העיצוב של Chromium HarfBuzz צריכה מדדים שבהם הערכים של trak עדיין לא נכללים.
באופן פנימי, Skia (ספריית הגרפיקה, ולא הגופן בעל אותו שם) משתמשת גם בכיתה CGFontRef מ-CoreGraphics וגם בכיתה CTFontRef מ-CoreText. עקב ההמרות הפנימיות הנדרשות בין האובייקטים האלה (המשמשות לשמירה על תאימות לאחור וגישה לממשקי API נדרשים בשני השיעורים), Skia יאבד את המשקל של המידע בנסיבות מסוימות, וגופנים מודגשים יפסיקו לפעול. הבעיה הזו תועדה בבעיה מס' 1057654.
עדיין צריך לתמוך ב-Skia ב-macOS 10.11 כי עדיין יש תמיכה ב-Chromium. ב-10.11 הגופנים San Francisco Text ו-San Francisco Display לא היו אפילו גופנים משתנים. במקום זאת, כל אחד מהם היה משפחה של גופנים נפרדים לכל משקל זמין. בשלב מסוים, מזהי הגליפים שלהם לא היו מסונכרנים. לכן, אם Skia תבצע עיצוב טקסט (המרה של טקסט לגליפים שאפשר לצייר) באמצעות 'San Francisco Text', הוא ייראה כמו שטויות אם יתבצע ציור באמצעות 'San Francisco Display', ולהפך. וגם אם Skia ביקשה רק גודל אחר, macOS עשויה לעבור לגודל השני. תמיד אפשר להשתמש באחד הגופנים ולשנות את הגודל שלו (באמצעות מטריקס כדי להגדיל אותו במקום לבקש גודל גדול יותר), אבל ב-CoreText יש בעיה שבה לא ניתן להגדיל גליפים של sbix (אמוג'י צבעוני) (רק להקטין אותם). זה קצת יותר מורכב. נראה ש-CoreText מגביל את ההיקף האנכי אחרי החלת המטריצה, וזה קשור לכך שלא ניתן לצייר אמוג'י בזווית של 45 מעלות. בכל מקרה, אם אתם רוצים שהאמוג'י שלכם יוצג בגדול, תצטרכו ליצור עותק של הגופן כדי לקבל גרסה גדולה שלו.
לכן, כדי ליצור עותקים של אובייקטים מסוג CTFont בגדלים שונים באופן פנימי, תוך הבטחה לשימוש באותם נתוני גופן בסיסיים, Chromium משך את ה-CGFont מה-CTFont, ואז יצר CTFont חדש מה-CGFont (אובייקטים מסוג CGFont לא תלויים בגודל, המעבר הקסום מתרחש ברמת CoreText). זה עבד מצוין עד גרסה 10.154. ב-10.15, בנסיעה הלוך ושוב הזו אבדו יותר מדי פרטים, וכתוצאה מכך נוצרה בעיית המשקל. הצוות של Flutter הבחין בבעיה של משקל הגופן, ותיקון חלופי לשינוי הגודל נוצר כדי ליצור את CTFont החדש ישירות מ-CTFont המקורי, תוך שליטה בגודל האופטי ישירות באמצעות מאפיין ישן שלא תועד ב-CoreText. כך אפשר להמשיך להשתמש ב-10.11 ולתקן בעיות אחרות (למשל, הגדרה מפורשת של הגודל האופטי לערך ברירת המחדל).
עם זאת, כך נשמר יותר מה'קסם' של CoreText בגופן. נראה שאחד מהם הוא שהיא עדיין משנה את ההתקדמות של הגליפים בדרך כלשהי מלבד טבלת trak (ש-Chromium כבר ניסה לדכא את היישום שלה באמצעות מאפיין לא מתועד נוסף).
CGFont לא מבצע אף אחת מהפעולות ה'קסומות' האלה, אז אולי Chromium יכול להסיר את CGFont מה-CTFont ולהשתמש בו רק כדי לקבל תשלומים מראש? לצערנו, זה לא יפעל כי CoreText ידוע כגורם לשינויים בגופנים גם בדרכים אחרות. לדוגמה, הוא הופך אמוג'י קטנים לגדולים יותר ממה שביקשת (הגדלת הגודל שלהם מעט). CGFont לא יודע על זה, ולכן בסופו של דבר האמוג'י מבוסס ה-sbix שלך יהיה קרוב מדי זה לזה, כי המדידה תהיה במידה אחת, אבל CoreText תגדיל את האמוג'י במידה מסוימת. אנחנו ב-Chromium רוצים את השיפורים של CTFont, אבל בלי מעקב, ובעדיפות בלי שום שטויות אחרות.
מאחר שהתיקון לבעיית הריווח הצריך קבוצה של תיקוני Blink ו-Skia מחוברים, מהנדסי Chromium לא יכלו "פשוט לחזור לאחור" כדי לפתור את הבעיה. מהנדסי Chromium ניסו גם להשתמש בדגל build אחר כדי לשנות נתיב קוד שקשור לגופנים ב-Skia. הפעולה הזו תיקנה את הבעיה בגופנים מודגשים, אבל החזירה את הבעיה במרווחים.
התיקון
בסופו של דבר, כמובן ש-Chromium רצה לתקן את שני הדברים. עכשיו, ב-Chromium נעשה שימוש בפונקציות המובנות של HarfBuzz למדדי גופן OpenType כדי לאחזר מדדים אופקיים ישירות מהנתונים הבינאריים בטבלאות הגופן של גופן המערכת. במצב הזה, Chromium מחליף את CoreText ואת סקיה כשבגופן יש טבלה של trak (אלא אם מדובר בגופן האמוג'י).
בינתיים, עדיין יש את בעיה מס' 10123 ב-Skia כדי לעקוב אחרי תיקון הבעיה הזו באופן מלא ב-Skia, ולחזור להשתמש ב-Skia כדי לאחזר משם את מדדי הגופן של המערכת, במקום התיקון הנוכחי שעובר דרך HarfBuzz.