בחירת אופן הפעולה של גופן אינטרנט בזמן הטעינה שלו יכולה להיות שיטה חשובה לשיפור הביצועים. מתאר תצוגת הגופנים החדש של @font-face מאפשר למפתחים להחליט איך הגופנים באינטרנט יוצגו (או חלופה), בהתאם למשך זמן הטעינה שלהם.
הבדלים בעיבוד הגופנים היום
השימוש ב-Web Fonts מאפשר למפתחים לשלב טיפוגרפיה עשירה בפרויקטים שלהם, כדי שאם אין למשתמש גופן כזה, הוא יצטרך להקדיש זמן כדי להוריד את הקובץ. מכיוון שרשתות יכולות להיות רעות, זמן ההורדה הזה עלול להשפיע לרעה על חוויית המשתמש. אחרי הכול, לאף אחד אין אפשרות לגלות עד כמה הטקסט שלכם יפה אם נדרש הרבה זמן להציג אותו!
כדי לצמצם חלק מהסיכון להורדת גופנים איטית, רוב הדפדפנים מטמיעים זמן קצוב לתפוגה שאחריו הם משתמשים בגופן חלופי. זו טכניקה שימושית, אבל לצערנו יש הבדלים בין הדפדפנים בהטמעה בפועל.
| דפדפן | חסימה זמנית | חלופי | החלפה |
|---|---|---|---|
| Chrome 35+ | 3 שניות | כן | כן |
| Opera | 3 שניות | כן | כן |
| Firefox | 3 שניות | כן | כן |
| Internet Explorer | 0 שניות | כן | כן |
| Safari | ללא זמן קצוב לתפוגה | לא רלוונטי | לא רלוונטי |
- ל-Chrome ול-Firefox יש זמן קצוב לתפוגה של שלוש שניות, שאחריו הטקסט מוצג עם הגופן החלופי. אם הורדת הגופן מצליחה, בסופו של דבר תתבצע החלפה והטקסט יעבור עיבוד מחדש עם הגופן המיועד.
- הזמן הקצוב לתפוגה של אפס שניות ב-Internet Explorer גורם לעיבוד טקסט מיידי. אם הגופן המבוקש עדיין לא זמין, נעשה שימוש בחלופה, והטקסט יעבור עיבוד מחדש מאוחר יותר כשהגופן המבוקש הופך לזמין.
- ל-Safari אין התנהגות של זמן קצוב לתפוגה (או לפחות זמן קצוב לתפוגה ברשת הבסיסית).
כדי להחמיר את העניין, למפתחים יש שליטה מוגבלת בהחלטה על האופן שבו הכללים האלה ישפיעו על האפליקציה שלהם. יכול להיות שמפתח שמודע לביצועים יעדיף ליהנות מחוויה ראשונית מהירה יותר עם גופן חלופי, ולהשתמש בגופן האינטרנט היפה יותר רק בביקורים הבאים אחרי שההורדה תספיק. באמצעות כלים כמו FontLoad API אפשר לשנות חלק מהתנהגויות ברירת המחדל של הדפדפן ולשפר את הביצועים, אבל זה כרוך בעלות נוספת של כתיבת קוד JavaScript בכמויות גדולות מאוד, ואז צריך להטמיע אותן בדף או לבקש אותן מקובץ חיצוני. כתוצאה מכך, נדרש זמן אחזור נוסף ב-HTTP.
כדי לתקן את המצב הזה, קבוצת העבודה של CSS הציעה מתאר @font-face חדש, font-display, ומאפיין מתאים לשליטה באופן הרינדור של גופן להורדה לפני שהוא נטען במלואו.
צירי זמן להורדת גופנים
בדומה להתנהגות הקיימת של הזמן הקצוב לתפוגה של גופן שדפדפנים מסוימים מטמיעים היום, font-display מפלחת את משך החיים של הורדת הגופן לשלוש תקופות עיקריות.
- התקופה הראשונה היא התקופה של חסימת הגופנים. במהלך פרק הזמן הזה, אם סוג הגופן לא נטען, כל אלמנט שמנסה להשתמש בו צריך להופיע במקום זאת עם גופן חלופי בלתי נראה. אם תצוגת הגופן נטענת בהצלחה במהלך תקופת החסימה, ייעשה שימוש רגיל בגופן.
- התקופה של החלפת הגופנים מתרחשת מיד לאחר התקופה של חסימת הגופנים. במהלך התקופה הזו, אם הגופן לא נטען, כל אלמנט שמנסה להשתמש בו צריך להופיע עם גופן חלופי. אם תצוגת הגופן נטענת בהצלחה במהלך תקופת ההחלפה, ייעשה שימוש רגיל בגופן.
- התקופה של כשל בגופנים מתרחשת מיד לאחר התקופה של החלפת הגופנים. אם הגופן עדיין לא נטען כשהתקופה הזו מתחילה, הוא יסומן כטעינה שנכשלה, וזה יגרום לחלופה רגילה של הגופן. אחרת, נעשה שימוש רגיל בגופן.
כשמבינים את התקופות האלה, אפשר להשתמש ב-font-display כדי להחליט איך הגופן יוצג בהתאם לזמן ההורדה שלו.
איזו תצוגת גופנים מתאימה לך?
כדי לעבוד עם font-display המתאר, מוסיפים אותו @font-face at-כללים:
@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.
אוטומטי
האפשרות אוטומטי משתמשת בכל אסטרטגיית הצגת הגופנים שבה משתמש סוכן המשתמש. לרוב הדפדפנים יש כרגע אסטרטגיית ברירת מחדל שדומה לחסימה.
חסימה
כשמשתמשים בבלוק, הגופן של גופן קצר עם בלוקים קצרים (ברוב המקרים מומלץ להשתמש ב-3 שניות) ותקופת החלפה אינסופית. במילים אחרות, הדפדפן מצייר בהתחלה טקסט 'בלתי נראה' אם הגופן לא נטען, אבל מחליף את הגופן ברגע שהוא נטען. לשם כך, הדפדפן יוצר גופן אנונימי עם מדדים שדומים לגופן שנבחר, אבל כל הגליפים לא מכילים 'דיו'. צריך להשתמש בערך הזה רק אם צריך לעבד טקסט בגופן מסוים כדי שניתן יהיה להשתמש בדף.
החלפה
כשמשתמשים ב-swap, לגופן יש פרק זמן של בלוק של אפס שניות ותקופת החלפה אינסופית. כלומר, הדפדפן משרטט טקסט באופן מיידי עם חלופה אם הגופן לא נטען, אבל מחליף את הגופן ברגע שהוא נטען. בדומה ל-block, צריך להשתמש בערך הזה רק כשמעבדים טקסט בגופן מסוים שחשוב לדף, אבל עיבוד בגופן כלשהו עדיין יעביר את המסר הנכון. כדאי להחליף טקסט של לוגו, כי הצגת שם החברה באמצעות חלופה סבירה תוביל להעברת המסר, אבל בסופו של דבר תשתמשו בגופן הרשמי.
חלופה
חלופה: לפני הגופן תוצג תקופת בלוקים קטנה במיוחד (מומלץ ברוב המקרים 100 אלפיות השנייה) ותקופת החלפה קצרה (ברוב המקרים מומלץ להשתמש בשלוש שניות). כלומר, סוג הגופן מוצג בהתחלה עם חלופה אם הוא לא נטען, אבל הגופן מוחלף ברגע שהוא נטען. עם זאת, אם עובר יותר מדי זמן, החלופה משמשת בשאר משך החיים של הדף. החלופה היא אפשרות טובה לדברים כמו טקסט בגוף ההודעה, כדי שהמשתמשים יוכלו להתחיל לקרוא בהקדם האפשרי, ולא רוצים להפריע לחוויית הצפייה על ידי שינוי הטקסט כשגופן חדש נטען.
אופציונלי
אופציונלי מאפשר בלוק של גופן קטן מאוד (מומלץ ברוב המקרים 100 אלפיות שנייה או פחות) ותקופת החלפה של אפס שניות. כמו החלופה, כדאי להשתמש באפשרות הזו כשגופן ההורדה יותר 'נחמד' אבל לא קריטי לחוויה. הערך אופציונלי משאיר לדפדפן להחליט אם להתחיל את הורדת הגופן. הוא עשוי לבחור לא לעשות זאת או לתת אותה בעדיפות נמוכה, בהתאם למה שלדעתם הכי מתאים למשתמש. זה יכול להיות שימושי במצבים שבהם החיבור של המשתמש חלש, והסרת גופן לא הכי כדאי לנצל את המשאבים.
תמיכת דפדפן
font-display עומד כרגע בסימון 'תכונות אינטרנט ניסיוניות' בגרסת Chrome 49 למחשב, וזמין ב-Opera ו-Opera ל-Android.
הדגמה (דמו)
צפו בדוגמה כדי לנסות את font-display. למפתחים שמקדישים את זמנם לשיפור הביצועים, זה יכול להיות עוד כלי שימושי אחד ברשימת הכלים שלכם.