Catalina כוללת משתנה מאוחד של גופן מערכת ב-macOS.
הקטע'system-ui' במפרט של מודול גופני CSS ברמה 4 מגדיר מילת מפתח של גופן system-ui שמאפשרת למפתחים להשתמש בגופן של מערכת ההפעלה המובנה, המותאם לטורבו, מותאם לשוק המקומי, באיכות גבוהה וללא צורך בהורדה, ישירות באתרים ובאפליקציות שלהם.
body {
font-family: system-ui;
}
בחירת הטיפוגרפיה דומה להצהרה: "יש להשתמש בגופן ברירת המחדל של המערכת עבור הלוקאל הנוכחי של המשתמש הזה".
ב-macOS, הגופן system-ui הוא סן פרנסיסקו, גופן שצוות העיצוב בדק, בדק ו... שדרג לאחרונה! קודם כול נלמד על התכונות החדשות והמלהיבות של הגופנים בקטלינה, ואז נדון בכמה באגים ואיך מהנדסי Chromium פתרו אותם.
בפוסט הזה אנחנו מניחים שאתם כבר מכירים גופנים משתנים. אם לא, מומלץ לצפות בסרטון מבוא לגופנים משתנים באינטרנט ולצפות בסרטון שבהמשך.
תאימות דפדפן
נכון מועד כתיבת ההודעה, system-ui קיבלה תמיכה מ-Chromium (מאז 56), מ-Edge (מאז 79), מ-Safari (מ-11) ומ-Firefox (מאז 43) אך עם מילת המפתח -apple-system. לעדכונים, אפשר לעיין במאמר האם אפשר להשתמש בגופנים משתנים?.
כוחות חדשים
היכולות החדשות שקטלינה הוסיפה לגופן של המערכת זמינות עכשיו למפתחי אתרים החל מגרסה 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 השתמשה ב "טקסט של סן פרנסיסקו". כשהטקסט היה 20px ומעלה, מערכת macOS השתמשה ב'תצוגת סן פרנסיסקו'. גודל אופטי נבנה באופן סטטי בשני גופנים נפרדים.
Catalina (macOS 10.15) שלחה גופן משתנה מאוחד חדש לסן פרנסיסקו. אין יותר צורך לנהל את ה "טקסט" ו "התצוגה". היא גם הוסיפה את הגדרת הווריאציה החדשה opsz שתוארה קודם לכן.
h1 {
font-variation-settings: 'opsz' 20;
}
לצערנו, ערך ברירת המחדל של opsz בגופן החדש בקטלינה הוא 20, והמהנדסים של Chromium לא היו מוכנים להחיל את opsz על גופן המערכת. כתוצאה מכך, גדלים קטנים יותר הוצגו בצורה צרה מדי.
כדי לפתור את הבעיה, Chromium היה צריך להחיל opsz בצורה נכונה על גופן המערכת. כתוצאה מכך, תיקנו את בעיה מס' 1005969. ניצחון! או אולי...?
עוד לא בוצע
כאן זה הסתבך: Chromium החיל את opsz אבל משהו לא נראה כמו שצריך. בגופני מערכת ב-Mac יש טבלת גופנים נוספת שנקראת trak, שמשנה את המרווח האופקי. בזמן העבודה על התיקון, מהנדסי Chromium הבחינו בכך שב-macOS, במהלך אחזור מדדים אופקיים מאובייקט CTFontRef, המדדים של trak כבר נלקחו בחשבון בתוצאות המדדים. לספריית העיצוב HarfBuzz של Chromium נדרשים מדדים שבהם הערכים של trak עדיין לא נלקחים בחשבון.
בתוך Skia (ספריית הגרפיקה, לא בגופן של אותו השם) נעשה שימוש גם במחלקה CGFontRef של CoreGraphics וגם במחלקה CTFontRef מ-CoreText. בגלל ההמרות הפנימיות הנדרשות בין האובייקטים האלה (המשמשות לשמירה על תאימות לאחור וגישה לממשקי ה-API הנחוצים בשתי המחלקות), Skia יאבד מידע במשקל בנסיבות מסוימות וגופנים מודגשים יפסיקו לפעול. המעקב אחרי הפסילה בוצע בגיליון מס' 1057654.
Skia עדיין צריכה לתמוך ב-macOS 10.11 כי Chromium עדיין תומך בה. ב-10.11 הגופנים "טקסט סן פרנסיסקו" ו"תצוגת סן פרנסיסקו" לא היו אפילו גופנים משתנים. למעשה, כל אחת מהן הייתה משפחה של גופנים נפרדים לכל משקל זמין. בשלב מסוים מזהי הגליפים שלהם לא סונכרנו זה עם זה. אם סקיה הייתה מעצבת את הטקסט (ממירה את הטקסט לגליפים שניתן לצייר) באמצעות "טקסט של סן פרנסיסקו", היא תהיה כתובה בג'יבריש אם היא תצייר את "תצוגת סן פרנסיסקו", ולהפך. גם אם Skia רק ביקשה מכם גודל macOS אחר, יכול להיות שתעברו למכשיר השני. אמורה להיות אפשרות להשתמש תמיד באחד מהגופנים ורק לשנות את קנה המידה (באמצעות מטריצה כדי להגדיל אותו במקום לבקש גודל גדול יותר). עם זאת, ב-CoreText יש בעיה שבה לא ניתן לשנות את קנה המידה של sbix (אמוג'י צבעוני) באמצעות גליף למעלה (רק למטה). זה קצת יותר מורכב מזה. נראה ש-CoreText למעשה מגביל את הגודל האנכי לאחר השימוש במטריצה, וזה קשור לכך שאין לצייר אמוג'י בזוויות של 45 מעלות. בכל מקרה, אם אתם רוצים שהאמוג'י יוצג בגדול, תצטרכו ליצור עותק של הגופן כדי לקבל גרסה גדולה שלו.
לכן, כדי ליצור עותקים של CTFont אובייקטים בגדלים שונים באופן פנימי ולוודא שמשתמשים באותם נתוני גופנים בסיסיים, Chromium משך את CGFont מה-CTFont, ואז יצר CTFont חדש מה-CGFont (CGFont אובייקטים לא תלויים בגודל, שינוי הקסם מתרחש ברמת CoreText). זה פעל בצורה תקינה עד 10.154. ביחס לשיעור 10.15, סיבוב הלוך ושוב הזה איבד יותר מדי מידע, וכתוצאה מכך קיימת בעיית המשקל. ב-Flubr זיהו את בעיית המשקל ויצרנו פתרון חלופי לשינוי הגודל כדי ליצור את 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 משתמש כעת בפונקציות מובנות של גופני OpenType בגופנים מסוג HarfPop כדי לאחזר מדדים אופקיים ישירות מהנתונים הבינאריים בטבלאות הגופנים של המערכת. במצב הזה, Chromium מחליף את CoreText ו-Skia אם בגופן יש טבלת trak (אלא אם זה גופן האמוג'י).
בינתיים, עדיין יש Skia Issue #10123 כדי לעקוב אחרי פתרון הבעיה באופן מלא ב-Skia, ולחזור להשתמש ב-Skia כדי לאחזר משם את מדדי הגופנים של המערכת, במקום התיקון הנוכחי שמתבצע דרך HarfBuzz.