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