הימנעות מהבזק של טקסט בלתי נראה

Katie Hempenius
Katie Hempenius
X

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

הוספת Font Face Observer

Font Face Observer הוא סקריפט מזהה מתי גופן נטען. fontfaceobserver.js כבר נשמר בספריית הפרויקט, כך שאין צורך להוסיף אותו בנפרד. עם זאת, צריך להוסיף עבורו תג סקריפט.

  • לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
  • הוספת תג סקריפט עבור fontfaceobserver.js ל-index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

שימוש ב-Font Face Observer

יצירת צופים

יוצרים תצפית לכל משפחת גופנים שבה נעשה שימוש בדף.

  • מוסיפים את הסקריפט הבא אחרי הסקריפט fontfaceobserver.js. הפעולה הזו יוצרת צופים באוקיינוס השקט ו-"Roboto" משפחות גופנים:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

אם אי פעם לא ברור לך אילו התראות פונטים צריך ליצור, אפשר פשוט לחפש ההצהרות font-family בשירות ה-CSS. צריך להעביר את השם font-family של ההצהרות האלה אל FontFaceObserver(). אין צורך ליצור שומר גופנים עבור גופנים חלופיים.

לדוגמה, אם שירות ה-CSS שלכם:

font-family: "Times New Roman", Times, serif;

צריך להוסיף את FontFaceObserver('Times New Roman'). Times ו-serif הם גופנים חלופיים, כך שלא יהיה צורך להצהיר עליהם על FontFaceObservers.

זיהוי של טעינת גופן

הקוד לזיהוי טעינת גופן נראה כך:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() הוא הבטחה שניתנת לפתרון כשהגופן נטען.

באתר ההדגמה משתמשים בשני גופנים שונים, לכן צריך להשתמש ב-Promise.all() כדי להמתין עד ששני הגופנים ייטענו.

  • מוסיפים את ההבטחה הזו לסקריפט, ממש מתחת ל-FontFaceObservers הוצהר לאחרונה:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️צ'ק-אין

עכשיו הסקריפט אמור להיראות כך:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

החלת כיתה אחת (fonts-loaded)

  • מחליפים את התגובה /* Do things */ בסקריפט בשורה הבאה:
document.documentElement.classList.add("fonts-loaded");

הפעולה הזו מוסיפה את המחלקה fonts-loaded לרכיב הבסיסי (root) של המסמך (החלק <html>) אחרי ששני הגופנים נטענים.

✔️צ'ק-אין

הסקריפט השלם שלכם אמור להיראות כך:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

עדכון שירות ה-CSS

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

  • מעדכנים את שירות ה-CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

אימות

  • כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.

אם הדף נראה כך, סימן שהטמעת בהצלחה את Font Face לצפות ב-"Flash של טקסט בלתי נראה" ולהיפטר מ'הבהוב של טקסט בלתי נראה'.

כותרת בגופן חזרתי.