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

קייטי המפניוס
קייטי המפניוס
X

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

הוספת בודק לזיהוי פנים של גופן

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

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

שימוש ב-Font Face Viewer

יצירת צופים

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

  • יש להוסיף את הסקריפט הבא אחרי הסקריפט 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;
}

אימות

  • כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.

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

כותרת בגופן מחובר.