שליטה בביצועי הגופנים באמצעות תצוגת גופנים

Rob Dodson

קביעת ההתנהגות של גופן אינטרנט בזמן הטעינה יכולה להיות שיטה חשובה לכוונון של הביצועים. מתאר תצוגת גופן חדש עבור האפליקציה @font-face מאפשרת למפתחים להחליט איך יוצגו (או חלופה) לגופנים באינטרנט בהתאם לזמן הטעינה שלהם.

הבדלים בעיבוד הגופנים היום

Web Fonts מאפשר למפתחים לשלב טיפוגרפיה עשירה את הפרויקטים שלהם עם יתרונות, שאם למשתמש לא יש כבר משפחת גופנים. הדפדפן צריך להקדיש זמן כדי להוריד אותו. כי רשתות יכולות יהיה רעוע, זמן ההורדה עלול להשפיע לרעה חוויה אישית. אחרי הכול, לאף אחד לא צריך להיות עניין עד כמה הטקסט יהיה יפה דורש זמן בלתי רגיל עד להצגה.

כדי לצמצם חלק מהסיכון להורדת גופן איטית, רוב הדפדפנים מטמיעים זמן קצוב לתפוגה שאחריו המערכת תשתמש בגופן חלופי. זאת טכניקה שימושית, לצערנו יש הבדלים בין הדפדפנים בהטמעה בפועל.

• ל-Chrome ול-Firefox יש זמן קצוב לתפוגה של שלוש שניות שאחריו הטקסט מוצג עם הגופן החלופי. אם ההורדה של הגופן תושלם, בסופו של דבר תתבצע החלפה והטקסט עובר עיבוד מחדש בגופן הרצוי.
• ל-Internet Explorer יש זמן קצוב לתפוגה של אפס שניות, שהתוצאה שלו היא טקסט מיידי ברינדור. אם הגופן המבוקש עדיין לא זמין, נעשה שימוש בחלופה רגילה וגם עיבוד הטקסט מחדש מאוחר יותר, כשהגופן המבוקש הופך לזמין.
• ל-Safari אין התנהגות של זמן קצוב לתפוגה (או לפחות שום דבר מעבר לרשת הבסיסית) ).

כדי להחמיר את העניינים, למפתחים יש שליטה מוגבלת בהחלטה על האופן שבו הם הכללים ישפיעו על היישום שלהם. יכול להיות שמפתח שמעוניין בביצועים יעדיף כדי ליהנות מחוויה ראשונית מהירה יותר שמשתמשת בגופן חלופי ולהשתמש רק בגופן חלופי וגופן אינטרנט יפה יותר בביקורים הבאים, אחרי שההורדה ניתנה לו. באמצעות כלים כמו Font טעינה API, ייתכן שניתן יהיה לעקוף חלק מה- את התנהגויות ברירת המחדל של הדפדפן ולהשיג שיפורים בביצועים, אבל העלות של כתיבת כמויות לא טריוויאליות של JavaScript, שחייבות להיות נוספה לדף או בקשה מקובץ חיצוני, וכתוצאה מכך יצטברו זמן אחזור ב-HTTP.

כדי לפתור את הבעיה, קבוצת העבודה של שירות ה-CSS הציעה הצעה חדשה מתאר @font-face, font-display ומאפיין תואם עבור שליטה באופן העיבוד של גופן שניתן להורדה לפני שהוא נטען במלואו.

צירי זמן להורדת גופנים

בדומה להתנהגות הקיימת של הזמן הקצוב לתפוגה של גופן שדפדפנים מסוימים מטמיעים היום, font-display מפלח את משך החיים של הורדת גופן לשלושה לתקופות שונות.

1. התקופה הראשונה היא התקופה של חסימת הגופנים. במהלך התקופה הזו, אם הגופן לא נטען, כל רכיב שמנסה להשתמש בו צריך להיות מוצג עם גופן חלופי בלתי נראה. אם הגופן נטען בהצלחה במהלך את תקופת הבלוקים, ומשתמשים בגופן כרגיל.
2. התקופה של החלפת הגופנים מתרחשת מיד לאחר התקופה של חסימת הגופנים. במהלך בפרק זמן זה, אם פני הגופן לא נטענו, רכיב כלשהו ינסה להשתמש בו חייב להיות רינדור במקום זאת עם גופן חלופי. אם הגופן הצליח נטען במהלך תקופת ההחלפה, לאחר מכן נעשה שימוש רגיל בגופן.
3. התקופה של כשל בגופן מתרחשת מיד אחרי פרק הזמן להחלפת גופנים. אם הגופן עדיין לא נטען כשהתקופה הזו מתחילה, הוא מסומן כטעינה שנכשלה, וגורם לחלופה רגילה של גופן. אחרת, הגופן משתמשים בפנים כרגיל.

כשמבינים את התקופות האלה אפשר להשתמש בפונקציה 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.

אוטומטי

האפשרות אוטומטי משתמשת בכל אסטרטגיית הצגת הגופנים שבה משתמש סוכן המשתמש. רוב הדפדפנים מוגדרת כרגע שיטת ברירת מחדל שדומה ל-חסימה.

חסימה

שימוש ב-block נותן בלוק של גופן קצר (ברוב המקרים מומלץ להשתמש ב-3 שניות) ותקופת החלפה אינסופית. במילים אחרות, הדפדפן מצייר את "בלתי נראה" טקסט אם הגופן לא נטען, אבל הוא מחליף את הגופן מיד ברגע שהוא נטען. בטעינה. כדי לעשות זאת, הדפדפן יוצר גופן אנונימי עם מדדים. דומה לגופן שנבחר, אבל כל הגליפים לא מכילים 'דיו'. יש להשתמש בערך הזה רק אם מתבצע רינדור טקסט בגופן מסוים הוא חובה כדי שניתן יהיה להשתמש בדף.

החלפה

כשמשתמשים ב-swap, לגופן יש פרק זמן של בלוק של אפס שניות ותקופת החלפה אינסופית. כלומר, אם סוג הגופן משרטט טקסט באופן מיידי עם חלופה, לא נטען, אבל מחליף את הגופן ברגע שהוא נטען. דומה לחסימה, יש להשתמש בערך הזה רק כאשר רינדור טקסט בגופן מסוים חשובות לדף, אבל עיבוד בגופן כלשהו עדיין יתקבל להעביר את המסר. טקסט לוגו מתאים להחלפה מכיוון שהוא מציג שם של חברה תוך שימוש בחלופה סבירה כדי להעביר את המסר, בסופו של דבר ישתמשו בגופן הרשמי.

חלופה

חלופה: לפני הגופן תוצג תקופת בלוקים קטנה במיוחד (100 אלפיות השנייה או פחות מומלץ ברוב המקרים) ותקופת החלפה קצרה (מומלץ להשתמש בשלוש שניות) ברוב המקרים). במילים אחרות, תצוגת הגופן מעובדת עם גיבוי תחילה אם הוא לא נטען, אבל הגופן מוחלף ברגע שהוא נטען. אבל, לפעמים אם יעבור יותר מדי זמן, המערכת תשתמש בחלופה לשאר החלקים כל משך החיים שלו. חלופה היא אפשרות טובה לדברים כמו טקסט בגוף ההודעה, למשל שהמשתמש יתחיל לקרוא בהקדם האפשרי ולא רוצה להפריע את החוויה שלהם באמצעות שינוי הטקסט עם טעינת גופן חדש.

אופציונלי

אופציונלי נותן לפני הגופן פרק זמן קטן מאוד (100 אלפיות השנייה או פחות ברוב המקרים) ותקופת החלפה של אפס שניות. דומה לחלופה, זאת בחירה טובה כשהגופן להורדה נראות טוב יותר, אבל לא חיוניות לחוויה. הערך האופציונלי משאיר אותו עד כדי להחליט אם להתחיל את הורדת הגופן, וייתכן שהוא לא יבחר לבצע אותה, או לתת אותה בעדיפות נמוכה, בהתאם למה שהיא חושבת שהכי מתאימות למשתמש. זה יכול להיות מועיל במצבים שבהם המשתמש נמצא חיבור חלש והורדת גופן הם לא הדרך הטובה ביותר לנצל את המשאבים.

תמיכה בדפדפנים

המכשיר font-display נמצא כרגע מאחורי הדגל 'תכונות ניסיוניות של פלטפורמת האינטרנט' ב-Chrome למחשב שולחני בגרסה 49, ונשלח אותו ב-Opera ו-Opera ל-Android.

הדגמה (דמו)

כדאי לעיין בדוגמה שתינתן font-display חבטה. למפתחים שאוהבים ביצועים יכולה להיות אפשרות אחת נוספת כלי שימושי ברשימת הכלים שלך!