בחירת ההתנהגות של גופן אינטרנט בזמן הטעינה יכולה להיות שיטה חשובה לשיפור הביצועים. המתאר החדש של font-display עבור @font-face מאפשר למפתחים לקבוע איך ייראו הגופנים שלהם באינטרנט (או חלופה חלופית), בהתאם למשך הזמן שלוקח להם לטעון.
הבדלים בהצגת הגופנים היום
גופנים באינטרנט מאפשרים למפתחים לשלב בפרויקטים שלהם טיפוגרפיה עשירה, אבל אם למשתמש עדיין אין גופן, הדפדפן צריך להקדיש זמן מסוים להורדת הגופן. מכיוון שהרשתות יכולות להיות לא יציבות, זמן ההורדה הזה עלול להשפיע לרעה על חוויית המשתמש. אחרי הכל, אף אחד לא יתעניין בטקסט שלכם אם יידרשו לו זמן רב מדי כדי להציג אותו.
כדי לצמצם את הסיכון להורדה איטית של גופן, ברוב הדפדפנים מוטמע זמן קצוב לתפוגה, שאחריו נעשה שימוש בגופן חלופי. זו טכניקה שימושית, אבל לצערנו יש הבדלים בין הדפדפנים בהטמעה בפועל.
| דפדפן | חסימה זמנית | חלופי | החלף |
|---|---|---|---|
| Chrome מגרסה 35 ואילך | 3 שניות | כן | כן |
| Opera | 3 שניות | כן | כן |
| Firefox | 3 שניות | כן | כן |
| Internet Explorer | 0 שניות | כן | כן |
| Safari | ללא זמן קצוב לתפוגה | לא רלוונטי | לא רלוונטי |
- בדפדפני Chrome ו-Firefox יש זמן קצוב של שלוש שניות, שאחריו הטקסט מוצג בגופן החלופי. אם הגופן יורד, בסופו של דבר מתבצע החלפה והטקסט עובר עיבוד מחדש עם הגופן הרצוי.
- ב-Internet Explorer יש זמן קצוב לתפוגה של אפס שניות, וכתוצאה מכך הטקסט עבר עיבוד מיידי. אם הגופן המבוקש עדיין לא זמין, המערכת משתמשת בגופן חלופי והטקסט יעבור עיבוד מחדש מאוחר יותר, כשהגופן המבוקש יהיה זמין.
- ל-Safari אין התנהגות של זמן קצוב לתפוגה (או לפחות לא מעבר לזמן קצוב לתפוגה ברשת).
גרוע מכך, למפתחים יש שליטה מוגבלת בהחלטה איך הכללים האלה ישפיעו על האפליקציה שלהם. מפתחים שמתמקדים בביצועים עשויים להעדיף חוויה ראשונית מהירה יותר שמשתמשת בגופן חלופי, ולהשתמש בגופן היפה יותר לאינטרנט רק בביקור חוזר אחרי שהיה להם מספיק זמן להוריד אותו. באמצעות כלים כמו Font Loading API, יכול להיות שתוכלו לשנות את חלק מהתנהגויות ברירת המחדל של הדפדפן ולהשיג שיפורים בביצועים, אבל התוצאה היא שתצטרכו לכתוב כמויות לא קטנות של JavaScript, ולאחר מכן להטמיע אותן בדף או לבקש אותן מקובץ חיצוני, וכתוצאה מכך זמן האחזור של HTTP יגדל.
כדי לפתור את הבעיה הזו, קבוצת העבודה בנושא CSS הציעה מאפיין תואר חדש של @font-face, font-display, ומאפיין תואם לצורך בקרה על אופן הרינדור של גופן שניתן להורדה לפני שהוא נטען במלואו.
לוחות זמנים להורדת גופנים
בדומה להתנהגויות הקיימות של זמן קצוב לתפוגה של גופנים שחלק מהדפדפנים מטמיעים היום, font-display מפלח את משך החיים של הורדת גופן לשלוש תקופות עיקריות.
- התקופה הראשונה היא התקופה של חסימה של גופן. במהלך התקופה הזו, אם סוג הגופן לא נטען, כל רכיב שמנסה להשתמש בו צריך להשתמש במקום זאת בסוג גופן חלופי בלתי נראה. אם התקנת הגופן הושלמה במהלך תקופת החסימה, המערכת תשתמש בו באופן רגיל.
- תקופת החלפת הגופן מתרחשת מיד אחרי תקופת החסימה של הגופן. במהלך התקופה הזו, אם סוג הגופן לא נטען, כל רכיב שמנסה להשתמש בו צריך להשתמש במקום זאת בסוג גופן חלופי. אם התקנת הגופן תתבצע בהצלחה במהלך תקופת המעבר, המערכת תשתמש בו באופן רגיל.
- תקופת הכשל של הגופן מתרחשת מיד אחרי תקופת החלפת הגופן. אם פורמט הגופן עדיין לא נטען כשהתקופות האלה מתחילות, הוא מסומן כטעינה שנכשלה, וכתוצאה מכך מתבצעת החלפה רגילה לגופן חלופי. אחרת, נעשה שימוש בגופן באופן רגיל.
הבנת התקופות האלה מאפשרת לכם להשתמש ב-font-display כדי לקבוע איך הגופן ייגרם, בהתאם למועד שבו הוא הורדה או לא.
איזו אפשרות של font-display מתאימה לכם?
כדי להשתמש בתיאור font-display, מוסיפים אותו לכללי ה-at-rule של @font-face:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
בשלב זה, font-display תומך בטווח הערכים הבא auto | block | swap | fallback | optional.
אוטומטי
הערך auto משתמש באסטרטגיית הצגת הגופן שבה סוכן המשתמש משתמש. רוב הדפדפנים כוללים כרגע אסטרטגיית ברירת מחדל שדומה לחסימה.
חסימה
block מקצה למשפחת הגופן תקופת חסימה קצרה (מומלץ להגדיר 3 שניות ברוב המקרים) ותקופת החלפה אינסופית. במילים אחרות, הדפדפן מצייר טקסט 'בלתי נראה' בהתחלה אם הגופן לא נטען, אבל מחליף את סוג הגופן ברגע שהוא נטען. לשם כך, הדפדפן יוצר גופן אנונימי עם מדדים שדומים לגופן שנבחר, אבל כל הגליפים לא מכילים 'דיו'. צריך להשתמש בערך הזה רק אם רינדור טקסט בגופן מסוים נדרש כדי שניתן יהיה להשתמש בדף.
החלפה
swap מקצה למשפחת הגופן תקופת חסימה של אפס שניות ותקופת החלפה אינסופית. כלומר, הדפדפן מצייר טקסט באופן מיידי עם חלופה אם סוג הגופן לא נטען, אבל מחליף את סוג הגופן ברגע שהוא נטען. בדומה לערך block, צריך להשתמש בערך הזה רק כשחשוב לדף להציג טקסט בגופן מסוים, אבל גם אם הוא יוצג בגופן אחר, עדיין תועבר ההודעה הנכונה. טקסט הלוגו הוא מועמד טוב להחלפה, כי הצגת שם החברה באמצעות גופן חלופי סביר תאפשר להעביר את המסר, אבל בסופו של דבר תשתמשו בגופן הרשמי.
חלופי
חלופה מקצה לגופן תקופת חסימה קצרה מאוד (מומלץ להשתמש ב-100ms או פחות ברוב המקרים) ותקופת החלפה קצרה (מומלץ להשתמש בשלוש שניות ברוב המקרים). במילים אחרות, אם הגופן לא נטען, הוא יומר בתחילה באמצעות גופן חלופי, אבל הגופן יוחלף ברגע שהוא נטען. עם זאת, אם יחלוף יותר מדי זמן, המערכת תשתמש בגיבוי למשך כל משך החיים של הדף. גיבוי הוא פתרון מתאים לדברים כמו גוף הטקסט, שבהם אתם רוצים שהמשתמש יתחיל לקרוא בהקדם האפשרי ולא רוצים להפריע לחוויית השימוש שלו על ידי העברת הטקסט בזמן טעינת הגופן החדש.
אופציונלי
הערך optional מקצה למשפחת הגופן תקופת חסימה קצרה מאוד (מומלץ להשתמש ב-100ms או פחות ברוב המקרים) ותקופת החלפה של אפס שניות. בדומה לאפשרות fallback, זוהי אפשרות טובה כשההורדה של הגופן היא 'נחמד שיש', אבל לא קריטית לחוויית השימוש. הערך אופציונלי משאיר לדפדפן את ההחלטה אם להתחיל את הורדת הגופן. הוא יכול לבחור לא לעשות זאת, או לעשות זאת בעדיפות נמוכה, בהתאם למה שהוא חושב שיהיה הכי טוב למשתמש. האפשרות הזו יכולה להיות שימושית במצבים שבהם למשתמש יש חיבור חלש, וייתכן שההורדה של גופן לא תהיה השימוש היעיל ביותר במשאבים.
תמיכה בדפדפנים
font-display מופעל כרגע באמצעות הדגל Experimental Web Platform Features ב-Chrome 49 למחשב, והוא מופיע ב-Opera וב-Opera ל-Android.
הדגמה (דמו)
כדאי לבדוק את הדוגמה כדי לנסות את font-display. למפתחים שמתמקדים בביצועים, זה יכול להיות כלי שימושי נוסף בתיק הכלים שלהם.