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

Katie Hempenius
Katie Hempenius
X

בשיעור ה-Codelab הזה תלמדו איך להציג טקסט באופן מיידי באמצעות Font Face Observer.

הוספת Font Face Observer

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

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

שימוש ב-Font Face Observer

יצירת משתמשים צופים

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

  • מוסיפים את הסקריפט הבא אחרי הסקריפט fontfaceobserver.js. הפקודה הזו יוצרת משגיחים על משפחות הגופנים 'Pacifico' ו-'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 לאלמנט הבסיס של המסמך (התג <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 Observer בהצלחה והצלחתם להיפטר מה'הבזק של טקסט בלתי נראה'.

כותרת בגופן כתב יד.